jQuery UI Widgets Forums Grid Reset page with dynamic source

This topic contains 5 replies, has 2 voices, and was last updated by  martin.l 9 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Reset page with dynamic source #69099

    martin.l
    Participant

    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 }
                            ]
                        });
                });
            });
    
    Reset page with dynamic source #69127

    Dimitar
    Participant

    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/

    Reset page with dynamic source #69166

    martin.l
    Participant

    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

    Reset page with dynamic source #69173

    Dimitar
    Participant

    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/

    Reset page with dynamic source #69175

    martin.l
    Participant

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

    Reset page with dynamic source #69176

    martin.l
    Participant

    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
       ...
     }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.