Jsgrid: how To refresh grid without reloading??

[yogesh2591]

How to load Data in grid without reloading entire grid.

My requirement is grid data should be refresh after 15 seconds ,
i use ajax for data retrieval for every 15 seconds.

[maurorulli]

loadData method should accomplish your purpose.

See the doc.

[yogesh2591]

here is my code

$("#jsGrid").jsGrid({
    width: "100%",
    height: "580px",
    controller: {
        loadData: function (filter) {
            var d = $.Deferred();
            var ajax_call = function ok() {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/get_details",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).done(function (response) {
                    console.log(JSON.parse(response.d));
                    d.resolve(
                        {
                            data: response.items,
                            itemsCount: response.itemCount
                        }
                        );
                });
            }

            setInterval(ajax_call, 5000);


        }
    },
    loadIndication: true,
    filtering: false,
    inserting: false,
    editing: true,
    sorting: true,
    selecting: true,
    paging: false,
    autoload: true,
    rowContextClick: function (args) {
        var event = args.event;
        if (args.event.target.classList.contains('can-not-click')) {
            try {
                $(".update_menu").hide();
                $(".menus").hide();
            }
            catch (err) {

            }

        } else {
            switch (event.which) {
                case 1:
                    try {
                        $(".update_menu").hide();
                        $(".menus").hide();
                    }
                    catch (err) { }
                    get_dialog();
                    var x = event.pageX;
                    var y = event.pageY;
                    var docwidth = $(document).width();
                    var docheight = $(document).height();
                    var checkY = $(".update_menu").height() + y + 50;
                    var checkX = $(".update_menu").width() + x;

                    if (checkY > docheight) {
                        value = checkY - docheight;
                        y = y - value;
                    }

                    if (checkX > docwidth) {
                        value = checkX - docwidth;
                        x = x - value;
                    }

                    $(".update_menu").attr("style", "top:" + (y + 5) + "px; left:" + (x + 5) + "px;");
                    $(".update_menu").show();
                    break;
                case 2:
                    try {
                        $(".update_menu").hide();
                        $(".menus").hide();
                    }
                    catch (err) {

                    }
                    break;
                case 3:
                    try {
                        $(".update_menu").hide();
                        $(".menus").hide();
                    }
                    catch (err) {

                    }
                    var x = event.pageX;
                    var y = event.pageY;

                    var docwidth = $(document).width();
                    var docheight = $(document).height();
                    var checkY = $(".menus").height() + y;
                    var checkX = $(".menus").width() + x;

                    if (checkY > docheight) {
                        value = checkY - docheight;
                        y = y - value;
                    }

                    if (checkX > docwidth) {
                        value = checkX - docwidth;
                        x = x - value;
                    }

                    $(".menus").attr("style", "top:" + (y + 5) + "px; left:" + (x + 5) + "px;");
                    $(".menus").show();
                    break;
                default:
                    try {
                        $(".update_menu").hide();
                        $(".menus").hide();
                    }
                    catch (err) {

                    }

            }
        }
    },
    fields: fields

});

I am setting the Data in in d.resolve function but unable to get Data in grid, ??

[maurorulli]

You are attempting to set an interval inside the loadData definition (and newly setted everytime data are loaded).
And you are attempting to setting data returned manually.
It's bad.

Instead use the classic loadData definition:

loadData: function() {
                var d = $.Deferred();

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/get_details",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).done(function(response) {
                    d.resolve(response.value);
                });

                return d.promise();
            }

After your js-grid definition add:
setInterval(function(){$("#jsGrid").jsGrid("loadData");}, 5000);
In this manner you'll call the loadData() method every 5 seconds. loadData() method will use the loadData configuration previously defined.

[yogesh2591]

@maurorulli how should i set current sorting and filtering on newely loaded data and also Check box selection in row

[maurorulli]

The DOC says: It preserves current sorting and paging.
About Check-box selection you have to save their state before the call, and restore their state on "onDataLoaded".

[yogesh2591]

how should i save the check box state . please guide

[tabalinas]

@yogesh2591: the first code snippet doesn't work because the deferred you resolve is not returned from lodaData. It won't be enough, because you also need to enable pageLoading: true (since you return data in this format).
Even after these changes data will be loaded only for the first time. Periodical updates won't happen since you will resolve already handled deferred.

The solution proposed by @maurorulli should work.
Actually on loading data by pages only refresh is called, so filters and sorting should be preserved. Are you sure they are cleared?

[yogesh2591]

hello @tabalinas i use @maurorulli method for loading grid data. Before loading grid i take the the sorting feild and order , after loading data again i just apply the sorting on grid. the only problem i faced is how should i store the check box state before grid loading and apply it after grid load . i also change the css of checked row when check box is checked, how should i perform this task

[tabalinas]

@yogesh2591, code from your first example looks incorrect. We tried to point to the issues. Since it's not clear where you stand right now, it's almost impossible to advice anything.
Would be helpful to have a fiddle or any other resource with public access to be able to see the problem you faced.

[stevehn]

Maurorulli , you have made my day with this little snippet codes of yours
function(){$("#jsGrid").jsGrid("loadData");

With this I can refresh the grid with new data set based on form selection parameter(s). Been staring at the documentation for days and was not able to put two and two together. So thanks.