Refresh Grid Data Not Working

[JustintkwParticipant]

I have a function that runs and loads the grid with data. Code is below. It runs without issue:

        function GenStdNotInCSGrid() {
            var data = @Html.Raw(Json.Encode(Model.StdNotInCSList));
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'StdRID', type: 'int' },
                    { name: 'StdAppRID', type: 'int' },
                    { name: 'AcaYr_Applied', type: 'string' },
                    { name: 'AcaTerm_Applied', type: 'string' },
                    { name: 'LName', type: 'string' },
                    { name: 'FName', type: 'string' },
                    { name: 'OnCampusProgramName', type: 'string' },
                    { name: 'Taken_Course_Before', type: 'string' },
                    { name: 'Previous_FinalMark', type: 'string' },
                    { name: 'Previous_FinalGrade', type: 'string' },
                    { name: 'Previous_CSCompStatus', type: 'string' }
                ],
                id: 'StdAppRID',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { $("#PageStatus").text(""); },
                loadError: function (xhr, status, error) { $("#PageStatus").text(error); }
            });
            var StdFullName  = function (row, columnfield, value, defaulthtml, columnproperties) {
                var rowdata = $('#jqxGrid_StdNotInCS').jqxGrid('getrowdata', row);
                var LName = rowdata["LName"];
                var FName = rowdata["FName"];
                return '<div style="text-align:left;margin-top:4px;font-size:0.8em;">' + LName + ', ' + FName + '</div>';
            }
            var AppliedForYrTerm  = function (row, columnfield, value, defaulthtml, columnproperties) {
                var rowdata = $('#jqxGrid_StdNotInCS').jqxGrid('getrowdata', row);
                var AcaYr_Applied = rowdata["AcaYr_Applied"];
                var AcaYrTrailer = ""
                if (parseInt(AcaYr_Applied, 10)) {AcaYrTrailer = "/" + (parseInt(AcaYr_Applied, 10) + 1).toString(); }
                var AcaTerm_Applied = rowdata["AcaTerm_Applied"];
                return '<div style="text-align:left;margin-top:4px;font-size:0.8em;">' + AcaYr_Applied + AcaYrTrailer + ', ' + AcaTerm_Applied + '</div>';
            }
            var AddToCS_Txt = function (row, columnfield, value, defaulthtml, columnproperties) {
                var rowdata = $('#jqxGrid_StdNotInCS').jqxGrid('getrowdata', row);
                var StdRID = rowdata["StdRID"];
                var StdAppRID = rowdata["StdAppRID"];
                var CSRID = rowdata["CourseRID"]
                return '<div style="text-align:center;margin-top:4px;font-size:0.8em;"><a href="#" onclick="AddStdToCS(' + StdRID + ', ' + StdAppRID + ', ' + CSRID + ')">Add</a></div>';
            }
            //initialize grid
            $("#jqxGrid_StdNotInCS").jqxGrid(
                {
                    source: dataAdapter,
                    ready: function () {
                        var length = data.length;
                        if (length == 0) {
                            $("#jqxGrid_StdNotInCS").jqxGrid('clear');
                        } else if (data[0]["StdRID"] == null || "" + data[0]["StdRID"] == "0") {
                            $("#jqxGrid_StdNotInCS").jqxGrid('clear');
                        }
                    }, //End ready function
                    rendered: function () { },
                    theme: 'classic',
                    width: 565,
                    autoheight: false,
                    height: 385,
                    pageSize: 10,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    editable: false,
                    selectionmode: 'none',  //none, singlecell, singlerow, multiplerows, multiplerowsextended, multiplecells, multiplecellsadvanced, checkbox
                    showtoolbar: true,
                    toolbarheight: 25,
                    rendertoolbar: function (toolbar) {
                        var title = "Approved On-Campus Students Not Currrently In Course Session";
                        var gridTitle = "<div style='width:100%;height:100%;vertical-align:middle;text-align:center;'>" +
                        "<div style='vertical-align:middle;font-size:12px;font-weight:bold;'>" + title + "<div></div>";
                        toolbar.append(gridTitle);
                    },  //End render footer bar
                    columns: [
                        {
                            text: 'Student', dataField: 'StdRID', columntype: 'textbox', width: 100,
                            cellsrenderer: StdFullName
                        },
                        {
                            text: 'Applied For', dataField: 'StdAppRID', width: 125,
                            cellsrenderer: AppliedForYrTerm
                        },
                        {
                            text: 'Program', dataField: 'OnCampusProgramName', columntype: 'textbox', width: 220,
                            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                                return '<div class="griddiv">' + value + '<div>';
                            }
                        },
                        {
                            text: 'Action', dataField: 'Taken_Course_Before', width: 60,
                            editable: false, filter: false, sortable: false,
                            cellsalign: 'center', align: 'center', cellsrenderer: AddToCS_Txt
                        }
                    ]
                }); //End Grid initialization
        }   //End GenGrid

I have a button on the page which using jQuery to get a new source of data with the exact structure. Code is below. However, upon click the button, the grid clears as expected, but the new data are not loaded.

    function CSList_Selection_Changed(theVal) {
        $.get("GenStdCSData",
        {
            CSRID: $('#HFCSRID').val(),
            AcaYr: $('#HFAcaYr').val()
        },
        function(dataFromServer) {
            var err = dataFromServer.errMsg;
            var StdNotInCSList = dataFromServer.StdNotInCSList;
            var StdInCSList = dataFromServer.StdInCSList;
            //Loading hardcoded data just to demonstrate grid issue.
            var data = [{"StdRID":38,"StdAppRID":103,"AcaYr_Applied":"2015","AcaTerm_Applied":"Fall","LName":"Aggia","FName":"Mart","OnCampusProgramName":"","Taken_Course_Before":"No","Previous_FinalMark":null,"Previous_FinalGrade":null,"Previous_CSCompStatus":null},{"StdRID":203,"StdAppRID":665,"AcaYr_Applied":"2015","AcaTerm_Applied":"Fall","LName":"Paul","FName":"Adrienne","OnCampusProgramName":"","Taken_Course_Before":"No","Previous_FinalMark":null,"Previous_FinalGrade":null,"Previous_CSCompStatus":null}];
            $("#jqxGrid_StdNotInCS").jqxGrid('clear');     //Grid clears as expected.
            var dataAdapter = new $.jqx.dataAdapter(data); //debugger shows that data are properly loaded onto dataAdapter.
            $("#jqxGrid_StdNotInCS").jqxGrid({ source: dataAdapter });
            $('#jqxGrid_StdNotInCS').jqxGrid('refresh');
            //The above two lines generates no error, but grid is NOT loaded with the new data.
        })
        .done(function() {
        })
        .fail(function(xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        });
    }

Assistance on resolve this issue is greatly appreciated.

[JustintkwParticipant]

Okay, I figured it out: Instead of binding the dataAdapter directly to the data, I have to find it to the source. The changed codes that work are:

    function CSList_Selection_Changed(theVal) {
        $.get("GenStdCSData",
        {
            CSRID: $('#HFCSRID').val(),
            AcaYr: $('#HFAcaYr').val()
        },
        function(dataFromServer) {
            var err = dataFromServer.errMsg;
            var StdNotInCSList = dataFromServer.StdNotInCSList;
            var StdInCSList = dataFromServer.StdInCSList;
            //Loading hardcoded data just to demonstrate grid issue.
            var data = [{"StdRID":38,"StdAppRID":103,"AcaYr_Applied":"2015","AcaTerm_Applied":"Fall","LName":"Aggia","FName":"Mart","OnCampusProgramName":"","Taken_Course_Before":"No","Previous_FinalMark":null,"Previous_FinalGrade":null,"Previous_CSCompStatus":null},{"StdRID":203,"StdAppRID":665,"AcaYr_Applied":"2015","AcaTerm_Applied":"Fall","LName":"Paul","FName":"Adrienne","OnCampusProgramName":"","Taken_Course_Before":"No","Previous_FinalMark":null,"Previous_FinalGrade":null,"Previous_CSCompStatus":null}];

            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'StdCSRID', type: 'int' },
                    { name: 'StdRID', type: 'int' },
                    { name: 'StdAppRID', type: 'int' },
                    { name: 'SessionRID', type: 'int' },
                    { name: 'LName', type: 'string' },
                    { name: 'FName', type: 'string' },
                    { name: 'MidTermMark', type: 'string' },
                    { name: 'FinalMark', type: 'string' },
                    { name: 'FinalGrade', type: 'string' },
                    { name: 'Notes', type: 'string' },
                    { name: 'StdCourseSessCompStatus', type: 'string' },
                ],
                id: 'StdCSRID',
                localdata: data
            };

            $("#jqxGrid_StdNotInCS").jqxGrid('clear');     //Grid clears as expected.

            var dataAdapter = new $.jqx.dataAdapter(souce); <strong>//bind to source instead</strong>
            $("#jqxGrid_StdNotInCS").jqxGrid({ source: dataAdapter });
            $('#jqxGrid_StdNotInCS').jqxGrid('refresh');
            //The above two lines generates no error, but grid is NOT loaded with the new data.
        })
        .done(function() {
        })
        .fail(function(xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        });
    }

But here is my question: Since the source has NOT changed from when the grid was initially loaded. why do I have do re-define it all over again? Is there a way to just update the data in the original source, instead of having to re-create the source variable?

Thanks!

[Peter StoevKeymaster]

Hi Justintkw,

I don’t understand why you redefined your source. If you want to rebind the Grid, you have to call updatebounddata, not refresh.

Best Regards,
Peter Stoev

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

[JustintkwParticipant]

Thanks Peter. As I mentioned in my first post, I didn’t want to redefine my source.

I am replacing the old data with a new set of data. So, all I want to do is to change the “localdata” property within the “source” from dataset-a to dataset-b, and then rebinds the grid. But I could not find any demonstration/instruction on how to do so.

If you would be so kind as to provide a few lines of code on how to do that, I would really appreciate it.

[Peter StoevKeymaster]

Hi Justintkw,

We have refresh data sample in the Grid’s demos. You can find it on the demos section.

Best Regards,
Peter Stoev

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

[Author]

Posts