jQuery UI Widgets Forums Grid grid performance

Tagged: ,

This topic contains 9 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • grid performance #24263

    rama
    Member

    We have a grid that has close to 40 columns. The user is generally looking at 10-15 columns and we have a way for the user to pick the columns he want to see. Some of the columns are editable. On IE8 & 9, when a cell is edited, it takes a long time to refresh that cell.
    We have cellsrenderer and cellvaluechanging overrides for these editable columns to track the changes and to format the cell ( we give a visual clue of the cells changing). We do ajax update by pressing a button. The client side updates are very slow on IE. Is there something we can do to improve the performance on IE.

    we are on 2.7.0.

    grid performance #24300

    Peter Stoev
    Keymaster

    Hi,

    You may consider upgrading to ver. 2.9.1 – the current one. It is faster. In addition, when you make multiple updates through method calls or property settings, use the Grid’s beginupdate, endupdate methods. Call beginupdate before and endupdate after your updates.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    grid performance #24890

    rama
    Member

    Upgrading to 2.9.1 made is better but still a problem on IE. I am not doing the updates through method calls. It is done by making the column editable and using the functionality of the grid to edit the cell. so once cell value is changed at a time. so beginupdate and endupdate doesn’t help.

    grid performance #24892

    Peter Stoev
    Keymaster

    Hi,

    How do you make a column editable after the Grid’s initialization? Isn’t it through a method call, because I do not know other way.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    grid performance #24902

    rama
    Member

    Yes I make the column editable after grid initialization. After the grid is loaded, the user can edit values in cells. It is when editing the values in the cell by clicking on the cell and entering a new value, it takes a long time on IE.

    grid performance #24903

    Peter Stoev
    Keymaster

    Hi,

    So, if you make a column editable or non-editable after the initialization, then you should call a Grid method to make it editable or not. This means that you should definitely use “beginupdate” and “endupdate” and if you do that correctly, then you will have just 1 render and it will be fast 🙂

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    grid performance #24905

    rama
    Member

    This is how I making the column editable.

    var columnTypeArray = [
    { text: ‘AA’, datafield: ‘AA’, width:75 , cellsalign: ‘left’, editable:true, createeditor:tagline_createeditor , cellbeginedit: tagline_cellbeginedit, cellsrenderer: editable_cellsrenderer }
    ]

    $(“#summaryGrid”).jqxGrid(
    {
    width: ‘100%’,
    source: dataAdapter,
    theme: theme,
    pageable: true,
    virtualmode: true,
    rendergridrows: function () {
    return dataAdapter.records;
    },
    pagesizeoptions:[’10’,’20’,’40’,’60’],
    autoheight: true,
    sortable: true,
    sorttogglestates: 1,
    showsortcolumnbackground : false,
    showpinnedcolumnbackground : false,
    showsortmenuitems : false,
    filterable : false,
    altrows: true,
    columnsheight:44,
    rowsheight :23,
    enabletooltips: true,
    editable: true,
    selectionmode: ‘singlecell’,
    editmode: ‘click’,
    columnsresize : true,
    columns: columnTypeArray

    });

    and the performance problem is not when I am initializing the grid. After the grid is loaded, the user clicks on a cell and modifies the value. After a new value is entered, it takes a while to update that cell.

    grid performance #24908

    Peter Stoev
    Keymaster

    Hi,

    It seems that you re-initialize the full Grid after an edit. That is wrong and will result in renders for each property change. You should use the Grid’s “setcolumnproperty” method to make a column editable or not after the initialization.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    grid performance #25804

    rama
    Member

    Peter
    I am not sure how you got the indication that I am re-initializing the full grid after an edit. The code I posted is my initialization code and all I do is mark the column as editable. After that it is all in the framework when I click on the cell to edit it. I am not re-initializing anything and I am not handling any of the edits. All I do is mark the column as editable. Also the programmatic way of setting the value is not valid because we dont do that. we use the editable feature of the grid by simply marking the column as editable,

    Only thing I can say is my grid has lot of columns (~40). At any given time the user is viewing about 15 columsn and do I do that by setting the showcolumn/hidecolumn property.

    grid performance #25823

    Peter Stoev
    Keymaster

    Hi rama,

    How many times do you call “showcolumn or hidecolumn” methods? Do you call “beginupdate” before making multiple method calls or not? If you do not, then you should.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.