jQuery UI Widgets Forums Grid Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid

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

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author

  • nitinayir8
    Participant

    Hi Admin,

    I am using jqxGrid and finding following difficulties:
    1) When i try to refresh grid after filtering and sorting column(server side), it doesn’t remove sort and i get below mention error.
    Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
    2) When i edit a record, new class is added to edited row. But when i sort that column, the class remains to prev index of a row rather displaying it to new row index of edited row. can u please provide us the solution.
    3) When i sort multiple times a “Shipped Date”, a example mentioned in your “phpdemos/server_side_grid_filtering_and_sorting_and_paging”, data disappears. Same issue occurs when i try to edit a sorted column cell value, full data grid goes blank.
    This issues occurs only when i make use of server side filters, sorting and retrieving of data. When “virtualmode: true” is used above issues occurs(server side), browser side works fine.
    4) It will be great, if you provide an example of “Refresh – jqxGrid” by creating new jqx.dataAdapter.

    Please see below code example(phpdemos/server_side_grid_filtering_and_sorting_and_paging/):
    $(document).ready(function () {
    // prepare the data
    // var theme = ‘classic’;
    var editedRows = new Array();

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ShippedDate’, type: ‘date’},
    { name: ‘ShipName’, type: ‘string’},
    { name: ‘ShipAddress’, type: ‘string’},
    { name: ‘ShipCity’, type: ‘string’},
    { name: ‘ShipCountry’, type: ‘string’}
    ],
    url: ‘data.php’,
    cache: false,
    updaterow: function (rowid, rowdata, commit) {
    // that function is called after each edit.

    var rowindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindexbyid’, rowid);
    editedRows.push({ index: rowindex, data: rowdata });

    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },

    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    if (data != null)
    {
    source.totalrecords = data[0].TotalRows;
    }
    }
    };
    var dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function(xhr, status, error)
    {
    alert(error);
    }
    }
    );
    var cellclass = function (row, datafield, value, rowdata) {
    for (var i = 0; i < editedRows.length; i++) {
    if (editedRows[i].index == row) {
    return “editedRow”;
    }
    }
    }
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataadapter,
    filterable: true,
    sortable: true,
    editable: true,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, cellclassname: cellclass, width: 200 },
    { text: ‘Ship Name’, datafield: ‘ShipName’, cellclassname: cellclass, width: 200 },
    { text: ‘Address’, datafield: ‘ShipAddress’, cellclassname: cellclass, width: 180 },
    { text: ‘City’, datafield: ‘ShipCity’, cellclassname: cellclass, width: 100 },
    { text: ‘Country’, datafield: ‘ShipCountry’, cellclassname: cellclass, width: 140 }
    ]
    });

    $(“#refresh”).on(“click”, function(){
    $(“#jqxgrid”).jqxGrid(“clearfilters”);
    $(“#jqxgrid”).jqxGrid(“removesort”);

    });
    });

    <button id=”refresh”>Refresh</button>
    <div id=’jqxWidget'”>
    <div id=”jqxgrid”></div>
    </div>


    Dimitar
    Participant

    Hello nitinayir8,

    1. You must make sure you call grid methods when the grid has been completely loaded.
    2. We tested the demo Edited Rows Rendering (with enabled sorting) but everything works fine on our side. The class remains applied to the correct rows after sorting.
    3. We could not reproduce this behaviour with the demo Grid Server Sorting. Maybe there is an issue with your server-side code.
    4. Here is an example: http://jsfiddle.net/Dimitar_jQWidgets/3yfnxufz/.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    Thanks for quick reply. Can you please check “phpdemos\server_side_grid_filtering_and_sorting_and_paging” example which you provided with download package.

    Update index.php inside “phpdemos\server_side_grid_filtering_and_sorting_and_paging” with follwing:
    $(document).ready(function () {
    // prepare the data
    // var theme = ‘classic’;
    var editedRows = new Array();

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ShippedDate’, type: ‘date’},
    { name: ‘ShipName’, type: ‘string’},
    { name: ‘ShipAddress’, type: ‘string’},
    { name: ‘ShipCity’, type: ‘string’},
    { name: ‘ShipCountry’, type: ‘string’}
    ],
    url: ‘data.php’,
    cache: false,
    updaterow: function (rowid, rowdata, commit) {
    // that function is called after each edit.

    var rowindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindexbyid’, rowid);
    editedRows.push({ index: rowindex, data: rowdata });

    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },

    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    if (data != null)
    {
    source.totalrecords = data[0].TotalRows;
    }
    }
    };
    var dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function(xhr, status, error)
    {
    alert(error);
    }
    }
    );
    var cellclass = function (row, datafield, value, rowdata) {
    for (var i = 0; i < editedRows.length; i++) {
    if (editedRows[i].index == row) {
    return “editedRow”;
    }
    }
    }
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataadapter,
    filterable: true,
    sortable: true,
    editable: true,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, cellclassname: cellclass, width: 200 },
    { text: ‘Ship Name’, datafield: ‘ShipName’, cellclassname: cellclass, width: 200 },
    { text: ‘Address’, datafield: ‘ShipAddress’, cellclassname: cellclass, width: 180 },
    { text: ‘City’, datafield: ‘ShipCity’, cellclassname: cellclass, width: 100 },
    { text: ‘Country’, datafield: ‘ShipCountry’, cellclassname: cellclass, width: 140 }
    ]
    });

    $(“#refresh”).on(“click”, function(){
    $(“#jqxgrid”).jqxGrid(“clearfilters”);
    $(“#jqxgrid”).jqxGrid(“removesort”);

    });
    });

    <button id=”refresh”>Refresh</button>
    <div id=’jqxWidget’”>
    <div id=”jqxgrid”></div>
    </div>

    You will found issues, whatever i specified in my previous comment. Quick help with an example will be appreciated.

    Thanks,

    Nitin


    Dimitar
    Participant

    Hi Nitin,

    • Here is what you can do to avoid the “data is still loading” error and successfully clear the filters and sorting:
      var clearFilters = false;
      
      $("#refresh").on("click", function() {
          clearFilters = true;
          $("#jqxgrid").jqxGrid("clearfilters");
      });
      
      $("#jqxgrid").on("bindingcomplete", function(event) {
          if (clearFilters === true) {
              $("#jqxgrid").jqxGrid("removesort");
              clearFilters = false;
          }
      });
    • The class editedRow will only be applied to visible rows because these are the only rows that are loaded in the grid. E.g. if you edit the initial row #1, then scroll, the class will be applied to the new visible row #1. To solve this, you would have to apply ids to your rows from the database, i.e.:
      var source = {
          datatype: "json",
          datafields: [{
              name: 'ShippedDate',
              type: 'date'
          }, {
              name: 'ShipName',
              type: 'string'
          }, {
              name: 'ShipAddress',
              type: 'string'
          }, {
              name: 'ShipCity',
              type: 'string'
          }, {
              name: 'ShipCountry',
              type: 'string'
          }],
          id: 'id',
          url: 'data.php',
          cache: false,
          updaterow: function(rowid, rowdata, commit) {
              // that function is called after each edit.
      
              editedRows.push({
                  id: rowid,
                  data: rowdata
              });
      
              // synchronize with the server - send update command
              // call commit with parameter true if the synchronization with the server is successful
              // and with parameter false if the synchronization failder.
              commit(true);
          },
      ...

      and then compare the ids in cellclass:

      var cellclass = function(row, datafield, value, rowdata) {
          var id = $('#jqxgrid').jqxGrid('getrowid', row);
          for (var i = 0; i < editedRows.length; i++) {
              if (editedRows[i].id == id) {
                  return "editedRow";
              }
          }
      }
      1. Best Regards,
        Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    Thanks for providing detail solution. It works like a champ.

    regards,

    Nitin


    nitinayir8
    Participant

    Hi Dimitar,

    One more strange issue we face when there are less record then that of pagesizeoptions, grid content becomes blank when we sort column and try to modify content of that column.
    Please take my prev post example for reference and retrieve only 4 records, then sort “Ship Name” and try to modify content of “Ship Name” and then click outside grid, full grid becomes blank.

    Please provide quick fix for this issue.

    Thanks,
    Nitin Ayir


    Dimitar
    Participant

    Hi Nitin Ayir,

    There is no such issue with our example, which is also available as an online demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic. The issue probably occurs because of the modifications you have made.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    The example mentioned http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic doesn’t have inline edit feature enabled. So can u please try enabling inline edit and than sort “shipname” column and modify one of its cell value. Above mentioned issue will occur. Looking forward for a fix.

    Thanks,
    Nitin


    Dimitar
    Participant

    Hi Nitin,

    If the grid has server-side paging, filtering and sorting, it also has to make server-side updates on cell edit. How to implement this is explained in the tutorial Build CRUD Web App with jqxGrid using PHP and MySQL. You will most likely need only the updaterow functionality in your case.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    When there are less records, grid becomes blank.

    One more strange issue which we found, when we try to copy content from “ShipName” datafield one row to the next row on first it works fine. When we try to repeat above steps on second page, it can’t copy the content. This only happens when pagination, we do pagination at server side. With client side pagination it works perfectly fine.

    Can you please provide a fix for the above two mentioned issues, we are stuck with this functionality.

    Regards,

    Nitin


    Dimitar
    Participant

    Hi Nitin,

    The provided examples work as expected. Please make sure you have checked them thoroughly and that you did not miss anything in your implementation, such as this setting in the source object (from the demo Grid Server Sorting, Paging and Filtering):

    beforeprocessing: function(data) {
        if (data != null) {
            source.totalrecords = data[0].TotalRows;
        }
    }

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    Grid Goes blank: I have already included above code. Can you please check by fetching only 4 records and then try to sort shipname.

    Can’t copy cell content: When server side pagination is done, first page allows to copy content from one cell to other but on second page we can’t copy content to other cell.
    Gets following error: 6
    TypeError: f[e] is undefined(…splayrows();for(var e=0;e<f.length;e++){if(f[e].dataindex!==undefined){if(f[e].d… jqxgrid.js file)

    Please refer example mentioned in your “phpdemos/server_side_grid_filtering_and_sorting_and_paging”

    Content of index.php file
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var theme = ‘classic’;

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ShippedDate’, type: ‘date’},
    { name: ‘ShipName’, type: ‘string’},
    { name: ‘ShipAddress’, type: ‘string’},
    { name: ‘ShipCity’, type: ‘string’},
    { name: ‘ShipCountry’, type: ‘string’}
    ],
    url: ‘data.php’,
    cache: false,
    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    if (data != null)
    {
    source.totalrecords = data[0].TotalRows;
    }
    }
    };
    var dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function(xhr, status, error)
    {
    alert(error);
    }
    }
    );

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataadapter,
    selectionmode: “multiplecellsadvanced”,
    theme: theme,
    filterable: true,
    clipboard: true,
    enablebrowserselection: true,
    altrows: true,
    sortable: true,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    editable: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, width: 200 },
    { text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
    { text: ‘Address’, datafield: ‘ShipAddress’, width: 180 },
    { text: ‘City’, datafield: ‘ShipCity’, width: 100 },
    { text: ‘Country’, datafield: ‘ShipCountry’, width: 140 }
    ]
    });
    var clearFilters = false;
    $(“#refresh”).on(“click”, function() {
    clearFilters = true;
    $(“#jqxgrid”).jqxGrid(“clearfilters”);
    });

    $(“#jqxgrid”).on(“bindingcomplete”, function(event) {
    if (clearFilters === true) {
    $(“#jqxgrid”).jqxGrid(“removesort”);
    clearFilters = false;
    }
    });
    });
    </script>
    </head>
    <body class=’default’>
    <button id=”refresh”>Refresh</button>
    <div id=’jqxWidget'”>
    <div id=”jqxgrid”></div>
    </div>
    </body>
    </html>

    Please run above script and check. Whatever issues i had mentioned, will be reproduced.

    regards,

    Nitin


    Dimitar
    Participant

    Hi Nitin,

    1. In the demo, we filter “Reims” in the “City” column and only 5 records remain. Then we sort by the “Ship Name” column and everything is fine.
    2. We reproduced the issue when trying to copy from pages other than the first. Unfortunately, we cannot provide you with a solution at the moment but we will investigate the issue for the next version. You can set clipboard: false to disable clipboard operations in the grid as a workaround.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    Thanks for quick and proper reply. Also issue one which i had mention “Grid Goes blank: I have already included above code. Can you please check by fetching only 4 records and then try to sort shipname” , try fetching only 4 records(total records). Currently you fetched 830 records, instead of that fetch only four records and repeat above steps i had mentioned.

    Please give fix for above mentioned issues, we bought your library and used jqxGrid in most of the screens. Client want copy paste feature in all the screens inorder to copy data from MS-excel.

    Thanks,

    Nitin


    Dimitar
    Participant

    Hi Nitin,

    1. When the grid is filtered, the totalrecords are changed, e.g. if we filter “Reims” in the “City” column, totalrecords will be changed to “5” in the next call of beforeprocessing. You can easily test this, even in the demo, by debugging with your browser’s development tools.
    2. Unfortunately, we cannot currently offer any solution for the copy issue but, as I said, we will look into it for the next version of jQWidgets.

    Best Regards,
    Dimitar

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

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.