Result of query returned immediately but loading to gridview of paramquery slow

[resolvecomputing]

I am developing a screen using gridview, the query returned the results as JSON in few microseconds but loading into the grid takes a long time. The table that is being queried has around 2500 rows. What could be the possible reason for such behavior?

[paramvir]

If you are using version older than 5, then please enable virtual mode

virtualX: true and virtualY: true

[resolvecomputing]

Now i using ParamQuery 5
This is my setting.Can you check and tell me something wrong. Thanks!

            height: 'flex',
            height: ClHeight,
            resizable: false,
            virtualX: true, virtualY: true,
            title: tran('adjustment'),
            rowBorders: false,
            rowHt: 20,
            toggle: function( event, ui ) {
                if (ui.state == 'max') {
                    $('#'+ event.target.id).css('top', '34px');
                }
            },
            filterModel: {
                on: true,
                mode: "AND",
                header: true
            },
            swipeModel: {
                on: 'touch'
            },
            treeModel: {
                dataIndx: 'chart_of_account_name',
                chk_dataIndx: 'state',
                cascade: true,           
                checkbox: function(rd) {
                    return !(rd.variance == undefined) &&  !(rd.variance == 0);
                },

                render: function (ui) {
                    if (ui.rowData.variance == undefined) {
                        var checked = ui.rowData.state?"checked":"";
                        return {
                            text: "<input type='checkbox' checked " + checked +" disabled style='width:18px;'/>" + ui.rowData.chart_of_account_name
                        };
                    } else if(ui.rowData.variance == 0) {
                        return {
                            text: "<input type='checkbox' checked "+ checked +" disabled style='width:18px;'/>" + ui.rowData.chart_of_account_name
                        };
                    }
                }
            },
            sortModel: {
                ignoreCase: true
            },
            scrollModel: {
                autoFit: true
            },
            colModel: [{
                dataIndx: 'chart_of_account_name',
                title: dbtran('chart_of_account_name'),
                exportRender: true,
                filter: {
                    type: 'textbox',
                    attr: 'autocomplete="off"',
                    condition: "contain",
                    listener: 'keyup'
                },
                editable: false
            },
            {
                dataIndx: 'chart_of_account_code',
                title: dbtran('chart_of_account_code'),
                align: 'center',
                filter: {
                    type: 'textbox',
                    attr: 'autocomplete="off"',
                    condition: "contain",
                    listener: 'keyup'
                },
                maxWidth: 150,
                width: 150,
                editable: false
            },{
                dataIndx: 'currency_iso',
                title: dbtran('currency_iso'),
                align: 'center',
                maxWidth: 60,
                width: 60,
                editable: false
            }, {
                dataIndx: 'calculate_ledger_balance',
                title: dbtran('calculate_ledger_balance'),
                dataType: 'float',
                format: '#,###.00',
                maxWidth: 150,
                width: 100,
                align: 'right',
                editable: false,
                summary: {
                    type: "sum"
                }
            }, {
                dataIndx: 'closing_balance',
                title: dbtran('closing_balance'),
                dataType: 'float',
                format: '#,###.00',
                maxWidth: 150,
                width: 100,
                align: 'right',
                editable: false,
                summary: {
                    type: "sum"
                },
                render: function (ui) {
                   // if (ui.rowData.ledger_balance != undefined && ui.rowData.ledger_balance.length > 0) {
                       return {closing_balance: 1000};
                   // }
                }
            }, {
                dataIndx: 'variance',
                title: dbtran('variance'),
                dataType: 'float',
                format: '#,###.00',
                maxWidth: 150,
                width: 100,
                align: 'right',
                editable: false,
                summary: {
                    type: "sum"
                }
            }],

            dataModel: {
                location: "remote",
                dataType: "JSON",
                method: "GET",
                url: "/adjustments/chartofaccounts?report_date=" + reportDate,
                getData: function (res) {
                    return {data: res};
                }
            },
            groupModel: groupModel

[paramvir]

1. What's the value of ClHeight? If it's too large, it may slow down the rendering of grid.

Please use inbuilt scrolling of the grid by defining small value of height/ maxHeight options to limit the number of rows displayed in the scrollable viewport.

2. If you don't need auto height of rows, then set autoRow: false, it also helps improve rendering performance.

https://paramquery.com/pro/api#option-autoRow

[resolvecomputing]

1. the ClHeight is available calculate screen's height.
2. I found the reason why it's slow, When i try to render with small data, it works well. But when i try with big data and setting "checkbox: true" or do some condition with checkbox function, it becomes hanging. Can you try simple treeGrid with big JSON which have more than 2000 objects and setting "checkbox : true" then see what is result. I don't know how checkbox function works.

Thanks!

[paramvir]

I have a recordset of ~5000 rows in treegrid with lazy loading. I've added checkbox: true with cascade: true, but performance is not a problem understandably due to lazy loading.

You can also try lazy loading.

Or if you can share your json data / jsfiddle that would be great to do insitu profiling of the code.