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 - 16 through 30 (of 30 total)
  • Author

  • nitinayir8
    Participant

    Hi Dimitar,

    Please follow below steps to reproduce the issue:
    1) Load only 4records
    2) Then sort on “shipname” column
    3) Try to edit content of only “shipname” column
    4) Grid becomes blank

    Refer below code:
    <!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 = 4;//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>

    Regards,

    Nitin


    Dimitar
    Participant

    Hi Nitin,

    totalrecords has to be based on the selected (with SELECT) and filtered (with WHERE) data received from the data source. You should not set it explicitly unless there really are only four records in your database and you do not intend to filter them. Otherwise, please follow the approach in the demo to avoid unexpected behaviour.

    Please also follow my advice from one of my previous posts if you are going to implement server-side updates.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    Consider if you have only four records in your database table(in our case orders). After fetching this four records from table, try to sort on “Shipname” column and then edit content of shipname. Grid will become blank.

    Can u please check if you can reproduce the issue at your end.

    Regards,
    Nitin


    Dimitar
    Participant

    Hi Nitin,

    As I said, if you need an editable grid with server-side functionalities, you will have to implement updaterow in the manner shown in the help topic Build CRUD Web App with jqxGrid using PHP and MySQL. Otherwise, you may experience unexpected behaviour. As you can see from our demos and help topic examples, when all functionalities are correctly implemented, no issues occur.

    Best Regards,
    Dimitar

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


    nitinayir8
    Participant

    Hi Dimitar,

    We have implemented editable grid by referring example Build CRUD Web App with jqxGrid using PHP and MySQL.

    Can you keep only 4 records in “orders” table, sort “Shipname” column and then edit content of “Shipname” column. Full grid will go blank.

    Hope now atleast i am much more clear to reproduce the issue at your end. Any help will be appreciated.

    Thanks,
    Nitin


    Peter Stoev
    Keymaster

    Hi Nitin,

    Editing does not affect your client data in Virtual Mode. When you edit in virtual mode, you have to implement the “updaterow” callback function of the source object and synchronize the updated row with your Data Source. This is something which you do not do in your code. When you’re going with virtual mode, you have to handle client-side operations such as paging, sorting, filtering, editing on your Server. The Grid in that mode is only a View.

    Best Regards,
    Peter Stoev

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


    nitinayir8
    Participant

    Hi Dimitar,

    Can you please show us how to do that, when we have less number of records in orders table. Consider we have only four records and not 830.

    Thanks,

    Nitin


    Peter Stoev
    Keymaster

    Hi Nitin,

    My name’s Peter. For implementing server paging, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?arctic. The number of records does not matter. The initialization is important.

    Best Regards,
    Peter Stoev

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


    nitinayir8
    Participant

    Hi Peter,

    Can you please tell us when is the next jqwidgets version will be released with a fix for copy paste not working on pagination(server side).

    regards,
    Nitin


    Peter Stoev
    Keymaster

    Hi Nitin,

    Second half of April.

    Best Regards,
    Peter Stoev

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


    nitinayir8
    Participant

    Hi Peter,

    Thanks, looking forward to it. Can you please look into grid blank issue when there are only four records in grid and we sort(not filter) a shipname column and try to edit that column content.

    Thanks,
    Nitin


    Peter Stoev
    Keymaster

    Hi Nitin,

    Sorry, but there is no such issue. I suggest you to look at the Demos and Documentation in order to learn how to correctly implement Server Paging along with filtering, sorting and editing.

    Best Regards,
    Peter Stoev

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


    nitinayir8
    Participant

    Hi Dimitar,

    Can u check this example on my server:
    Note: Refresh the link if mod_security error comes
    Grid goes blank

    Steps to reproduce:
    1) sort on address column
    2) then try to edit “korgao” with some value say “zzzz”
    3) now click outside grid

    Behaviour: Grid goes blank.
    Please refer my code:
    <!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.sort.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.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” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    //var theme = ‘classic’;

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘name’, type: ‘string’},
    { name: ‘address’, type: ‘string’},
    ],
    url: ‘data.php’,
    cache: false,
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;

    }
    };

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: source,
    sortable: true,
    editable: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ‘Name’, datafield: ‘name’},
    { text: ‘Address’, datafield: ‘address’},
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget'”>
    <div id=”jqxgrid”></div>
    </div>
    </body>

    I have implemented grid as per your example. Can you check and tell me the fix.

    Thanks,

    Nitin


    nitinayir8
    Participant

    Hi Peter/Dimitar,

    Are you able to reproduce the issue at your end?

    Regards,

    Nitin


    Peter Stoev
    Keymaster

    Hi Nitin,

    No, we are not able to reproduce an issue with the provided code. I suggest you to look again our examples and follow the same approach for Client & Server side scripts. I also suggest you to bind the Grid to dataAdapter, not to source object.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.