Reset page with dynamic source

[martin.lParticipant]

Hi.
I am currently creating two jqxgrids with a master-details relationship.
Data is loaded from server through two MVC5 actions (JSON).
When a row is selected in the master grid, the details grid is updated using a dynamic source and a custom request parameter.
Currently everything works as expected, however the following scenario creates an error.

Select a row in master grid that returns _more_ than 10 results to details grid (pagesize in details grid is default 10).
Change page in details grid
Select a row in master grid that returns _less_ than 10 results to details grid
Details grid will now show 0 results (because it is still on second page, and there is not enough data for the grid to show a second page)

How to reset the page number when dynamically loading data??

        
        //Init Class Grid
        $(document).ready(function () {        
            // prepare the data
            var classessource =            
                {                
                    datatype: "json",                
                    datafields: [
                        { name: 'ID', type: 'int' },
                        { name: 'Name', type: 'string' },					 
                        { name: 'Location', type: 'string' },					 
                        { name: 'StartDate', type: 'date' },					 
                        { name: 'EndDate', type: 'date' },					 
                        { name: 'Students', type: 'int' }                
                    ],
                    url: 'GetClassData',
                    // update the grid and send a request to the server.            
                    sort: function () { $("#Grid_Classes").jqxGrid('updatebounddata', 'sort'); },
                    root: 'Rows',
                    beforeprocessing: function (data) {
                        if (data != null) {
                            classessource.totalrecords = data.TotalRows;
                        }
                    },
                };

            var classesdataadapter = new $.jqx.dataAdapter(classessource, { loadError: function (xhr, status, error) { alert(error); } });

            // initialize jqxGrid        
            oClassesTable = $("#Grid_Classes").jqxGrid(
                {
                    width: 600,
                    source: classesdataadapter,
                    filterable: false,
                    sortable: true,
                    autoheight: true,
                    pageable: true,
                    virtualmode: true,
                    rendergridrows: function (obj) { return obj.data; },
                    columns: [
                      { text: "ID", datafield: "ID", cellsformat: 'n', width: 40 },
                      { text: "Navn", datafield: "Name", width: 130 },
                      { text: "Lokale", datafield: "Location", width: 130 },
                      { text: "Start", datafield: "StartDate", cellsformat: 'd', width: 100, cellsalign: 'right' },
                      { text: "Slut", datafield: "EndDate", cellsformat: 'd', width: 100, cellsalign: 'right' },
                      { text: "# Studerende", datafield: "Students", cellsformat: 'n', width: 100, cellsalign: 'right' }
                    ]
                });

            // update details DataTable when the selection of the master DataTable is changed.
            $("#Grid_Classes").on('rowselect', function (event) {

                // key == Classes ID
                var key = event.args.row.ID;

                var studentsource =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'ID', type: 'int' },
                            { name: 'Name', type: 'string' }
                        ],
                        url: 'GetStudentData',
                        // update the grid and send a request to the server.            
                        sort: function () { $("#Grid_Students").jqxGrid('updatebounddata', 'sort'); },
                        root: 'Rows',
                        beforeprocessing: function (data) {
                            if (data != null) {
                                studentsource.totalrecords = data.TotalRows;
                            }
                        }
                    };

                var studentDataAdapter = new $.jqx.dataAdapter(studentsource,
                    {
                        formatData: function (data) {
                            $.extend(data, {
                                ClassesID: key
                            });
                            return data;
                        },
                        loadError: function (xhr, status, error) { alert(error); }
                    });

                // update the details DataTable.
                $("#Grid_Students").jqxGrid({ source: studentDataAdapter });
                
            });

            //Init Students Grid
            $(document).ready(function () {

                // initialize jqxGrid        
                oStudentsTable = $("#Grid_Students").jqxGrid(
                    {
                        width: 600,
                        filterable: false,
                        sortable: true,
                        autoheight: true,
                        pageable: true,
                        virtualmode: true,
                        selectionmode: 'multiplecellsadvanced',
                        rendergridrows: function (obj) { return obj.data; },

                        columns: [
                          { text: "ID", datafield: "ID", cellsformat: 'n', width: 40 },
                          { text: "Navn", datafield: "Name", width: 130 }
                        ]
                    });
            });
        });

[DimitarParticipant]

Hi martin.l,

Please try the following: on Grid_Classes rowselect, before everything else, call the gotopage method with parameter 0 for the Grid_Students grid, i.e.:

$('#Grid_Students').jqxGrid('gotopage', 0);

Best Regards,
Dimitar

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

[martin.lParticipant]

Hi Dimitar. I have tried that (sorry, should have mentioned this), however this sometimes results in the details grid updating wrongly. First it will update and display the correct data for a second or so, but will then revert back and show the first page of the data connected to the previous selected row in the master grid. Perhaps this is due to the fact that the second call to .jqxGrid(…) completes before the .jqxGrid(‘gotopage’,0) has completed?
Is there a way to ensure that the two calls will always be handled in the sequence they were called?

$(‘#Grid_Students’).jqxGrid(‘gotopage’, 0);
…
$(“#Grid_Students”).jqxGrid({ source: studentDataAdapter });

//Martin

[DimitarParticipant]

Hi Martin,

In this case, you can call the second line of code in the pagechanged event handler, i.e.:

var flag = 0;

...

flag = 1;
$('#Grid_Students').jqxGrid('gotopage', 0);

...

$("#Grid_Students").on("pagechanged", function() {
    if (flag === 1) {
        $("#Grid_Students").jqxGrid({
            source: studentDataAdapter
        });
        flag = 0;
    }
});

The flag variable ensures the grid will be updated only when necessary.

Best Regards,
Dimitar

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

[martin.lParticipant]

Great, I’ll try that! Thanks for quick support.
//Martin

[martin.lParticipant]

For anyone else with this issue, remember to check whether the details grid is already on page 0, because if it is the pagechanged event will not fire and the details grid will not be updated.

var paginginfo = $("#Grid_Students").jqxGrid('getpaginginformation');
 if (paginginfo.pagenum != 0)
 {
   //pagechanged event updates students grid
   $("#Grid_Students").jqxGrid('gotopage', 0);
 }
 else
 {
   //Update students grid manually
   ...
 }

[Author]

Posts