CODEWITHSUNDEEP
jquerykendo-uikendo-grid
Jesus A.
Jesus A.

Reputation: 69

Reset Kendo Grid column

I have kendo Grid column like this:

$("#lstCategory").kendoGrid({
  dataSource: {
    data: info,
    autoSync: true,
    schema: {
      model: {
        fields: {
          category: { editable: false, type: "string" },
          subCategory: { editable: false, type: "string" }
        }
      }
    },
    pageSize: 7,
    group: {
      field: "category",
      aggregates: [
        { field: "category", aggregate: "count" }
      ]
    }
  },
  sortable: true,
  scrollable: false,
  pageable: true,
  editable: true,
  columns: [
    { field: "category", title: "Categoría", aggregates: ["count"], groupFooterTemplate: "Total: #=count#" },
    { field: "subCategory", title: "Subcategoria" },
    { command: "destroy", title: "", width: "150px" }

  ]
});
}

There I add fields for post action. The problem is I want to reset this grid after post to flush it and insert another value I try to use the next commands:

$("#lstCategory").empty(); // this one dissapear kendo grid
$('#lstCategory').data('kendoGrid').refresh();
$('#lstCategory').data().kendoGrid.destroy();

but none of them flush my kendo after post, what can be the problem there?

Update:

Try as Dread Pirate answer:

after post action I send this:

var grid = $("#lstCategory").getKendoGrid();
var info = refeshInfoFromServer();
grid.dataSource.data(info);

function refeshInfoFromServer() {
  return $("#lstCategory").data("kendoGrid").dataSource.read();
}

It appears to work, but my page gets stuck in loading. Google Chrome Inspector return

kendo.all.min.js:11 Uncaught TypeError: e.slice is not a function

Upvotes: 1

Views: 5914

Answers (1)

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

You want to re-read the data for the grid from the server after post?

grid.refresh() will only rebind the grid to the current dataSource...it does not force the underlying dataSource to re-read from the server. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

What you normally want to do to force a grid to hit the server again is to use the underlying dataSource's read() method(http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read), i.e:

$("#lstCategory").data("kendoGrid").dataSource.read();

But, this will only hit the server IF the dataSource is bound to a remote read end-point, otherwise it just re-reads the local array...your dataSource's data is coming from the mysterious variable called "info", which is probably an already-fetched array, yes?

In that case, you would need to first force the info array to be refreshed(by doing whatever you did to fill it the first time again) THEN update the grid's dataSource with the new data, THEN rebind the grid.

Something like this:

// Do Post or whatever...
var grid = $("#lstCategory").getKendoGrid();
info = refeshInfoFromServer();
grid.dataSource.data(info);
//grid.refresh(); // NOTE: not necessary as .data(info) will automatically do rebind to the grid it belongs to.automatically do this.

Working demo with fake data: http://dojo.telerik.com/@Stephen/aGAQo

Upvotes: 1

Related Questions