jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by raj 10 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

jqxgrid performance issue & additional features Posts

July 23, 2014 at 4:54 am jqxgrid performance issue & additional features #57584

raj

Participant

We are planning to buy the licensed version
1) However, while perform the aggregation on grouping with multiple columns(grouping done dynamically – “addgroup” method) under the groupsrenderer event. For an each addgroup method it invokes the groupsrenderer event so here we facing performance issue
for an two level of pivoting it took 4 to 5 sec. please give me any suggestion to increase the performance.
2) On grouping, while perform the aggregation on different column, that the values are applied to group header cell(i.e., aggregated column cell).
3) We need different group header color(forecolor applied to header only, not for inner row content) based on levels of grouping(for eg.: first level–>”Red”, Second level–> green and so on), whether it is possible to do that or not.

July 23, 2014 at 5:09 am jqxgrid performance issue & additional features #57586

Peter Stoev

Keymaster

Hi raj,

Sorry, but we cannot provide a solution for increasing the performance from the provided information.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 23, 2014 at 5:43 am jqxgrid performance issue & additional features #57594

raj

Participant

Hi peter stoev,

We using jQWidgets 3.4.0 latest script, For the third point, our requirement is like that
Consider the Link : http://s12.postimg.org/a9pir5cil/jqxwidgetgrid.jpg
please find the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Demo</title>
    <link rel="stylesheet" href="../Assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    
     <style type="text/css">
        .jqx-grid-group-cell
        {
            border-left-width: 1px;
            border-right-width: 1px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var depart = [{
                department: "Dept1",
                project: "p1",
                person: "a",
                planhrs: 10,
                salary: 5000
            }, {
                department: "Dept1",
                project: "p1",
                person: "b",
                planhrs: 5,
                salary: 5500
            }, {
                department: "Dept2",
                project: "p2",
                person: "c",
                planhrs: 10,
                salary: 500
            }, {
                department: "Dept2",
                project: "p1",
                person: "d",
                planhrs: 20,
                salary: 25000
            }, {
                department: "Dept1",
                project: "p2",
                person: "e",
                planhrs: 30,
                salary: 50
            }];

            var source = {
                datatype: "json",
                datafields: [{
                    name: 'department',
                    type: 'string'
                }, {
                    name: 'project',
                    type: 'string'
                }, {
                    name: 'person',
                    type: 'string'
                }, {
                    name: 'planhrs',
                    type: 'int'
                }, {
                    name: 'salary',
                    type: 'int'
                }],
                localdata: depart
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var theme = 'office';
            var toThemeProperty = function (className) {
                return className + " " + className + "-" + theme;
            }

            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'planhrs' || data.groupcolumn.datafield == 'department' || data.groupcolumn.datafield == 'project' || data.groupcolumn.datafield == 'person') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);

                    var text = data.groupcolumn.text + ': ' + number;
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, data.subItems);
                        var aggregate1 = this.getcolumnaggregateddata('salary', ['sum'], true, data.subItems);
                    } else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            } else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata('planhrs', ['sum'], true, rows);
                        var aggregate1 = this.getcolumnaggregateddata('planhrs', ['sum'], true, rows);
                    }
                    var tt = "<div style=\"width: 100%; float: left;\"><div style=\"width: 20%; float: left;\">" + number + "</div><div style=\"width: 20%; float: left;\">&nbsp;</div><div style=\"width: 20%; float: left;\">&nbsp;</div><div style=\"width: 20%; float: left;text-align:right;\">" + aggregate.sum + "</div><div style=\"width: 20%; float: left;text-align:right;\">" + aggregate1.sum + "</div></div>";
                    return tt;
                    console.log(tt);
                } else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

            $("#jqxgrid").jqxGrid({
                width: '100%',
                pageable: true,
                autorowheight: true,
                autoheight: true,
                altrows: true,
                source: dataAdapter,
                columnsresize: true,
                groupable: true,
                sortable: true,
                groupsrenderer: groupsrenderer,
                groupsexpandedbydefault: true,
                selectionmode: 'singlecell',
                altrows: true,
                columns: [{
                    text: 'department',
                    datafield: 'department', widht: 'auto'
                }, {
                    text: 'project',
                    datafield: 'project', widht: 'auto'
                }, {
                    text: 'person',
                    datafield: 'person', widht: 'auto'
                }, {
                    text: 'planhrs',
                    datafield: 'planhrs',
                    cellsalign: 'right', widht: 'auto'
                }, {
                    text: 'salary',
                    datafield: 'salary',
                    cellsalign: 'right', widht: 'auto'
                }]
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.