sortingjsgrid

JsGrid - Keep sorted order on refresh


I have a grid in jsGrid that refreshes every 5 seconds. While filtering is fine and it remains on refresh, sorting the tables does not. Once the refresh hits the table automatically goes back to its unsorted, default, order.

Is there any way to get the JsGrid to keep its sorting on refresh?

Here's my code:

$("#jsGrid").jsGrid({
  height: "300px",
  width: "100%",
  filtering: true,
  sorting: true,
  paging: true,
  autoload: true,
  pageSize: 10,

  controller: {
    loadData: function(filter) {
      var data = $.Deferred();

      $.ajax({
        type: "GET",
        url: BASE_URL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
           //SUCCESS MESSAGE
        },
        error: function(textStatus, errorThrown) {
          //ERROR MESSAGE
        }
      }).then(function(result) {
        result = $.grep(result,
          function(item) {
            return //FILTERED RESULTS;
          });

        data.resolve(result);
      });

      return data.promise();
    }
  },

  //SAMPLE FIELDS
  fields: [{
      name: "Name",
      type: "text",
      width: 150
    },
    {
      name: "Age",
      type: "number",
      width: 50
    },
    {
      name: "Address",
      type: "text",
      width: 200
    },
    {
      name: "Country",
      type: "select",
    }
  ]
});

setInterval(function() {
  //Refreshes grid only after 5 seconds
  $("#jsGrid").jsGrid("loadData");
}, 5000);

Solution

  • Found an answer! A thread was posted yesterday onto GitHub for someone looking for the same thing I was:

    Source

    The answer was inside my setInterval function to call the .done function and call the jsGrid sorter in there. :

    setInterval(function() {
      //Refreshes grid only after 5 seconds
    
         $('#jsGrid').jsGrid("loadData").done(function () {
                var sorting = $("#jsGrid").jsGrid("getSorting");
                $("#jsGrid").jsGrid("sort", sorting);
    
    }, 5000);