jQWidgets Forums

jQuery UI Widgets Forums Grid Performance of the page is very slow when using Grid

This topic contains 3 replies, has 3 voices, and was last updated by  robf 8 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • vikramsid
    Participant

    Hi,

    We have a page that has grid with all the questions in a grid and users have to answer each question (one by one). The grid has 5 columns.
    Id, Description, Answer, Responsible Party, Resp User and Remarks. Responsible Party and Resp User columns are dependent on Answer. if Answer is Yes then these are not required. When answer is No, Responsible party is required, based on the selection in Resp Party the Resp User will be enabled. My user wants to use Tab from one column control to other control and from one row to next row (which i couldn’t find a way).

    When i implemented that with the below code, the performance of the application is very slow (we are also saving the data when the focus is lost on every control because there will be some 200 questions on the screen so we don’t want to have session timeout and ask user to click the save everytime). We need your help in improving the performance and the ways to deal with the issues. Ideas are greatly appreciated. i copied some sample code below.

    
    var rowNum;
                $("#grdQuestionnaire").jqxGrid(
                {
                    width: '99.8%',
                    autorowheight: true,
                    autoheight: true,
                    //theme: 'energyblue',
                    source: auditQuestionAdapter,
                    //columnsResize: true,
                    //editable: true,
                    //selectionmode: 'singlerow',
                    //editmode: 'singlecell',
                    //pageable: true,
                    ready: function () {                    
                        //$("#grdQuestionnaire").jqxGrid('sortby', 'orderId', 'asc');
    
                        if (statusCode == "CX" || statusCode == "CM") {
                            if (role != "MANAGER") {
                                $("#grdQuestionnaire").jqxGrid({ editable: false });
                            } else {
                                $("#grdQuestionnaire").jqxGrid({ editable: true });
                            }
                        }
                        else {
                            $("#grdQuestionnaire").jqxGrid({ editable: true });
                        }
                    },
                    columns: [
                           {
                               text: 'Seq. #', dataField: 'seqNum', align: 'center', cellsalign: 'center', columnType: 'button', editable: false, width: '5%', cellsrenderer: function (row, value, rowdata) {
                                   return rowdata;
                               }
                               ,
                               buttonclick: function (row) {
                                   var x = window.open("Popup.aspx?acapsid=" + Id + "&Panel=" + auditQuestionAdapter.records[row].Panel, 'Panel', 'width=900, height=600, resizeable=1, scrollbars=1');
                               }
                           },
                           { text: 'Question', dataField: 'description', width: '47%', editable: false, cellclassname: cellclass },
                           {
                               text: 'Answer', dataField: 'answer', width: '6%', align: 'center', cellsalign: 'center', columnType: "dropdownlist", //cellclassname: cellclass,
                               initeditor: function (row, value, editor) {
                                   rowNum = row;
                                   var rowData = $('#grdQuestionnaire').jqxGrid('getrowdata', row);
                                   if (rowData.primaryQuestionId == 0) {
                                       var rows = $('#grdQuestionnaire').jqxGrid('getdisplayrows');
                                       var answers = [];
                                       var isNo = false;
                                       var primaryId = rowData.id;
                                       for (var x = 0; x < rows.length; x++) {
                                           if (rows[x].primaryQuestionId == primaryId) {
                                               //answers[x] = rows[x].answer;
                                               if (rows[x].answer == "No" || rows[x].answer == "Justified") {
                                                   isNo = true;
                                               }
                                           }
                                       }
    
                                       editor.jqxDropDownList({ autoOpen: true, selectedIndex: -1, source: answersAdapter, displayMember: "value", valueMember: "value", height: 25, autoDropDownHeight: true, placeHolder: "Select:" });
                                       if (isNo) {
                                           var item = editor.jqxDropDownList('getItemByValue', "Yes");
                                           editor.jqxDropDownList('removeItem', item);
                                       }
                                   }
                                   else {
                                       editor.jqxDropDownList({ autoOpen: true, selectedIndex: -1, source: answersAdapter, displayMember: "value", valueMember: "value", height: 25, autoDropDownHeight: true, placeHolder: "Select:" });
                                   }
    
                                   editor.jqxDropDownList().on('change', function (event) {
                                       var args = event.args;
                                       if (args) {
                                           if (args.index != -1) {
                                                                                                                               
    
                                               if ($('#grdQuestionnaire').jqxGrid('getcellvalue', rowid, "answer") != args.item.label || (answervalue != args.item.label && isAnswerChanged)) {
    
                                                   if (args.item.label == "Yes") {
                                                       $("#grdQuestionnaire").jqxGrid('setcellvalue', rowid, "respPartyType", "");
                                                       $("#grdQuestionnaire").jqxGrid('setcellvalue', rowid, "respPartyRacf", "");
                                                   }                                               
    
                                                   //if (idvalue != "" && args.item.label != "" && args.item.label != "Select:") {
                                                   //    autoSaveValue("Answer", idvalue, acapsIdvalue, auditQueueIdvalue, args.item.label);
                                                   //    isanswerAnswered = true; 
                                                   //}
                                                   isAnswerChanged = true;
                                               }
    
                                               answervalue = args.item.label;
                                           }
                                       }
                                   });
    
                                   editor.jqxDropDownList().on('close', function (event) {
                                       var args = event.args; 
                                       if(answervalue != editor.jqxDropDownList().text())
                                       {
                                           answervalue = editor.jqxDropDownList().text() != "Select:" ? editor.jqxDropDownList().text() : "";
    
                                           if (!isanswerAnswered) {
    
                                               if (answervalue != "") {
                                                   autoSaveValue("Answer", idvalue, acapsIdvalue, auditQueueIdvalue, answervalue);
                                                   isanswerAnswered = true;
                                                   answervalue = "";
                                               }                                           
                                           } 
                                       }
                                   });
                                   
                                   var answer = $('#grdQuestionnaire').jqxGrid('getcellvalue', row, "answer");
    
                                   var items = editor.jqxDropDownList('getItems');
                                   $.each(items, function () {
                                       var item = this;
                                       if (item.label == answer) {
                                           editor.jqxDropDownList('selectItem', item);
                                       }
                                   });
                               }
                           },
                            {
                                text: 'Resp. Party', dataField: 'respPartyType', width: '7%', align: 'center', cellsalign: 'center', columnType: "dropdownlist", //cellclassname: cellclass,
                                initeditor: function (row, column, editor) {
                                    var answer = $('#grdQuestionnaire').jqxGrid('getcellvalue', row, "answer");
                                    var resparty = $('#grdQuestionnaire').jqxGrid('getcellvalue', rowid, "respPartyType");
    
                                    if (answer == "No" || answer == "Justified") {
                                        editor.jqxDropDownList({ autoOpen: true, selectedIndex: -1, autoDropDownHeight: false, disabled: false, source: respPartyAdapter, displayMember: "value", valueMember: "key", height: 25, placeHolder: "Select:" });
                                        
                                            var items = editor.jqxDropDownList('getItems');
                                            $.each(items, function () {
                                                var item = this;
                                                item.title = respPartyAdapter.records[item.index].description;
                                                if (item.label == resparty) {
                                                    editor.jqxDropDownList('selectItem', item);
                                                }
                                            });
                                        
                                    } else {
                                        var defaultValue = new Array();
                                        editor.jqxDropDownList({ autoDropDownHeight: true, height: 25, disabled: true, source: defaultValue, placeHolder: "" });
                                    }
    
                                    editor.jqxDropDownList().on('change', function (event) {
                                        var args = event.args;
                                        if (args) {
                                            if (args.index != -1) {
    
                                                if ($('#grdQuestionnaire').jqxGrid('getcellvalue', rowid, "respPartyType") != args.item.label || (resppartyvalue != args.item.label && isResPartyChanged)) {
                                                    if (args.item.label != "V" && args.item.label != "R") {
                                                        $("#grdQuestionnaire").jqxGrid('setcellvalue', rowid, "respPartyRacf", "");
                                                    }
    
                                                    isResPartyChanged = true;
    
                                                }
    
                                                resppartyvalue = args.item.label;
                                            }
                                        }
                                    });
    
                                    editor.jqxDropDownList().on('close', function (event) {
                                        var args = event.args;
                                        if(resppartyvalue != editor.jqxDropDownList().text())
                                        {
                                            resppartyvalue = editor.jqxDropDownList().text() != "Select:" ? editor.jqxDropDownList().text() : "";
                                            if (!isresPartyAnswered) {
                                                var rowData = $("#grdQuestionnaire").jqxGrid('getrowdata', row);   
                                                if (resppartyvalue != "") {
                                                    autoSaveValue("ResParty", rowData.id, rowData.acapsId, rowData.auditQueueId, resppartyvalue);
                                                    isresPartyAnswered = true;
                                                    resppartyvalue = "";
                                                }                                                
                                            }
                                        }
    
                                    });
                                }
                            },
                            {
                                text: 'RACF ID', dataField: 'respPartyRacf', width: '10%', align: 'center', cellsalign: 'center', columnType: "dropdownlist", //cellclassname: cellclass,
                                initeditor: function (row, column, editor) {
                                    var racf;
                                    var respPartyType = $('#grdQuestionnaire').jqxGrid('getcellvalue', row, "respPartyType");
                                    if (respPartyType == "R" || respPartyType == "V") {
                                        editor.jqxDropDownList({ autoOpen: true, checkboxes: true, disabled: false, autoDropDownHeight: false, displayMember: "value", valueMember: "key", height: 25, source: clscRacfAdapter, placeHolder: "Select:" });
                                        var items = $('#grdQuestionnaire').jqxGrid('getcellvalue', row, "respPartyRacf");
                                        if (items != null && items != "") {
                                            var racf = items.split(",");
                                            for (var i = 0; i < racf.length; i++) {
                                                editor.jqxDropDownList('checkItem', racf[i]);
                                            }
                                            isRacfChanged = false;
                                        }
                                    } else {
                                        var defaultValue = new Array();
                                        editor.jqxDropDownList({ autoDropDownHeight: true, disabled: true, height: 25, source: defaultValue, placeHolder: "" });
                                    }
    
                                    editor.on('checkChange', function (event) {
                                        if (event.args) {
                                            var item = event.args.item;
                                            if (item) {                                            
                                                isRacfChanged = true;
                                            }
    
                                        };
                                    });
    
                                    //racf = editor.jqxDropDownList().text();
    
                                    editor.jqxDropDownList().on('close', function (event) {
                                        var args = event.args;
                                        //if (editor.jqxDropDownList().text() != "Select:") {
                                            
                                            racfidvalue = editor.jqxDropDownList().text() != "Select:" ? editor.jqxDropDownList().text() : "";
                                            //var rowData = $("#grdQuestionnaire").jqxGrid('getrowdata', row);
                                            //idvalue = rowData.id;
                                            //acapsIdvalue = rowData.acapsId;
                                            //auditQueueIdvalue = rowData.auditQueueId
                                            if (isRacfChanged) {
                                                autoSaveValue("Racfids", idvalue, acapsIdvalue, auditQueueIdvalue, racfidvalue);
                                                racfidvalue = null;
                                                isRacfChanged = false;
                                            }
                                        //}
                                    });
                                }
                                ,
                                geteditorvalue: function (rowid, cellvalue, editor) {
                                    // return the editor's value.
                                    return editor.jqxDropDownList().text() != "Select:" ? editor.jqxDropDownList().text() : "";
                                }
                            },
                            {
                                text: 'Remarks', dataField: 'remarks', align: 'center', cellsalign: 'left', width: '25%', columntype: 'textbox', //cellclassname: cellclass,
                                initeditor: function (row, column, editor) {
                                    editor.jqxInput({ disabled: false, width: '100%', height: 35, minLength: 1 });
                                    editor.jqxInput().on('change', function () {
                                        remarksvalues = editor.jqxInput('val');
                                        autoSaveValue("Remarks", idvalue, acapsIdvalue, auditQueueIdvalue, remarksvalues);
                                        remarksvalues = null
                                    });
                                }
    
                            }
                    ]
                });
    
                $('#grdQuestionnaire').on('rowClick', function (event) {
                    var args = event.args;
                    var row = args.rowindex;
                    rowid = row;
                    isAnswerChanged = false;
                    isanswerAnswered = false;
                    resppartyvalue = false;
                    isresPartyAnswered = false;
                    var rowData = $("#grdQuestionnaire").jqxGrid('getrowdata', row);
                    idvalue = rowData.id;
                    acapsIdvalue = rowData.acapsId;
                    auditQueueIdvalue = rowData.auditQueueId;
                    answervalue = $("#grdQuestionnaire").jqxGrid('getcellvalue', rowid, "answer");
                    resppartyvalue = $("#grdQuestionnaire").jqxGrid('getcellvalue', rowid, "respPartyType");
                });
    

    Peter Stoev
    Keymaster

    Hi vikramsid,

    I see that you enabled autoheight and autorowheight. These affect the performance when you did not enable Paging. The reason is very simple – autoheight requires all HTML Elements to be visible on the page and many HTML Elements means poor performance for your web page. I suggest you to enable Paging. As you can see on our samples, the Grid performs very well when it is used correctly.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    vikramsid
    Participant

    Hi Peter,
    Thanks for the response. My dropdown controls on each cell open in 3-4 seconds, the same way when I close the dropdown and tab to next cell it takes 3 secs to focus on the next control. Any reason why it is happening? As you suggested I will try to remove the autoheight and autorowheight from the code coz I have to show all my questions on a single page.

    Thanks,
    Vikram


    robf
    Participant

    Hi Peter,

    Loading several thousand rows into grid with grouping set to one column. After data is loaded the scrolling appears OK. However, when I click on a row to expand I’m witnessing the browser (Chrome) spike to more than 50% CPU. This happens consistently and eventually crashes the browser. I’m at a complete loss for this massive performance hit and it makes the app unusable. Might you have any suggestions for improving performance within options? Desperate for tuning!

    I define the grid once and load data on demand based on file contents of json.

    var data = jsondata;

    gridSource =
    {
    datatype: “json”,
    localdata: data,
    //id: ‘id’,
    sortcolumn: ‘timestamp’,
    sortdirection: ‘desc’,
    dataFields:
    [
    {
    name: ‘_name’,
    type: ‘string’
    },
    {
    name: ‘pxltype’,
    type: ‘string’
    },
    {
    name: ‘ibdtradereferencenumber’,
    type: ‘string’
    },
    {
    name: ‘timestamp’,
    type: ‘string’
    },
    {
    name: ‘ibdreferencenumber’,
    type: ‘string’
    },
    {
    name: ‘tramid’,
    type: ‘string’
    }, {
    name: ‘adddata’,
    type: ‘string’
    },
    {
    name: ‘buysellcode’,
    type: ‘string’
    },
    {
    name: ‘accountnumber’,
    type: ‘string’
    },
    {
    name: ‘securityidentifier’,
    type: ‘string’
    },
    {
    name: ‘quantity’,
    type: ‘number’
    },
    {
    name: ‘price’,
    type: ‘number’
    },
    {
    name: ‘tradedate’,
    type: ‘date’
    },
    {
    name: ‘settlementdate’,
    type: ‘date’
    },
    {
    name: ‘executingbroker’,
    type: ‘string’
    },
    {
    name: ‘contrabroker’,
    type: ‘number’
    },
    {
    name: ‘offsetaccountnumber’,
    type: ‘string’
    },
    {
    name: ‘overridepoolfactor’,
    type: ‘number’
    }, {
    name: ‘gooddeliverydate’,
    type: ‘date’
    }, {
    name: ‘mbscindicator’,
    type: ‘string’
    }
    ]
    };

    $(‘#jqxGrid’).on(‘bindingcomplete’,
    function (event) {
    //alert(‘binding complete’);
    showProgress(false);
    });

    var dataAdapter = new $.jqx.dataAdapter(gridSource);

    $(“#jqxGrid”).jqxGrid(
    {
    width: ‘97%’,
    height: ‘60%’,
    theme: ‘energyblue’,
    source: dataAdapter,
    sortable: true,
    groupable: true,
    columnsresize: true,
    filterable: true,
    pageable: true,
    //showfilterrow: true,
    editable: true,
    editmode: ‘dblclick’,
    selectionmode: ‘multiplerows’,
    groups: [‘ibdtradereferencenumber’],
    // ready: function () {
    // $(“#jqxGrid”).jqxGrid(‘selectrow’, 0);
    // $(‘#jqxGrid’).jqxGrid(‘focus’);
    // },
    columns:
    [
    {
    text: ‘Name’,
    dataField: ‘_name’,
    width: 150
    },
    {
    text: ‘Type’,
    dataField: ‘pxltype’,
    width: 80
    },
    {
    text: ‘IBD Trade Ref Nbr’,
    dataField: ‘ibdtradereferencenumber’,
    width: 150
    },
    {
    text: ‘Timestamp’,
    dataField: ‘timestamp’,
    width: 200
    },
    {
    text: ‘IBD Ref Nbr’,
    dataField: ‘ibdreferencenumber’,
    width: 150
    },
    {
    text: ‘TRAM ID’,
    dataField: ‘tramid’,
    width: 190
    },
    {
    text: ‘Additional Data’,
    dataField: ‘adddata’,
    width: 340
    },
    {
    text: ‘B/S’,
    dataField: ‘buysellcode’,
    width: 50
    },
    {
    text: ‘Account Number’,
    dataField: ‘accountnumber’,
    width: 150
    },
    {
    text: ‘Security ID’,
    dataField: ‘securityidentifier’,
    width: 130
    },
    {
    text: ‘Quantity’,
    dataField: ‘quantity’,
    width: 100
    },
    {
    text: ‘Price’,
    dataField: ‘price’,
    width: 120
    },
    {
    text: ‘Trade Date’,
    dataField: ‘tradedate’,
    cellsFormat: ‘d’,
    width: 120
    },
    {
    text: ‘Settle Date’,
    dataField: ‘settlementdate’,
    cellsFormat: ‘d’,
    width: 120
    },
    {
    text: ‘Exec Broker’,
    dataField: ‘executingbroker’,
    width: 130
    },
    {
    text: ‘Contra Broker’,
    dataField: ‘contrabroker’,
    width: 100
    },
    {
    text: ‘Offset Account’,
    dataField: ‘offsetaccountnumber’,
    width: 120
    },
    {
    text: ‘Override Pool Factor’,
    dataField: ‘overridepoolfactor’,
    width: 160
    },
    {
    text: ‘Good Delivery Date’,
    dataField: ‘gooddeliverydate’,
    cellsFormat: ‘d’,
    width: 150
    },
    {
    text: ‘MBSC Ind’,
    dataField: ‘mbscindicator’,
    width: 90
    }
    ]
    });
    }

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

You must be logged in to reply to this topic.