0

I have a Kendo grid: how can I reload the whole grid after clicking a button? Here's the button:

<input type="button" id="btnReload" name="reload" value="Reload" />

Below is the function that handles the button click:

$('#btnReload').click(function (e) {
    var grid = $("#datagrid_Roads").data("kendoGrid");
    //grid.reload();
    grid.dataSource.page(1);
    grid.dataSource.read();
});

OK, the above refreshes the data in the grid. What I want is something like the commented code (in the above block) so the whole grid is reloaded, not just the data in it.

How can I do this?

EDIT

The reason I want this is because I want to make a custom filter to my grid since the built-in filter functionalities of the grid do not work for me in Internet Explorer, as can be seen in this question I asked before to which I still haven't found a solution. The custom filter is a DropDownList with different values for filtering. (in my case, concessions to which the listed roads belong)

Here are the grid specifications:

<div id="datagrid">
    @(Html.Kendo().Grid<SustIMS.Models.RoadModel>()
        .Name("datagrid_Roads")
        .Columns(columns =>
        {
            columns.Bound(r => r.RoadCode).Title(ViewBag.lblCode).Width(140);
            columns.Bound(r => r.RoadType).Title(ViewBag.RoadType).Width(140);
            ...
            columns.Bound(r => r.ConcessionMediumDescription).Title(ViewBag.Concession);
        })
        .HtmlAttributes(new { style = "height: 534px;" })
        ...
        .DataSource(dataSource => dataSource
            .Ajax()
            .Filter(filters =>
            {
                filters.Add(road => road.ConcessionMediumDescription).Contains(Session["concessionFilter"].ToString());
            })
            .PageSize(15)
            .Read(read => read.Action("GetRoads", "MasterData"))
        )
    )
</div>

As you can see, I set a filter that's a session variable, set as the first item of a DropDownList by default.

When the user changes the DropDownList selection, a controller method is called and the session variable is set with a filter value. However, the grid doesn't show any filtered data because it was loaded before with the previous value of the session variable. I want it to be reloaded with the new value for the session variable so the filter actually works.

Anyone?

Community
  • 1
  • 1
chiapa
  • 4,362
  • 11
  • 66
  • 106
  • here you go http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid – Umesh Sehta Jul 31 '14 at 09:19
  • Thanks @MohitArora, I've seen that and it doesn't work. It refreshes the data in the grid but not the grid itself. I want the grid to be completely erased and rebuilt. I'll add some more details to the question explaining why I want this. – chiapa Jul 31 '14 at 09:25

1 Answers1

0

Try like this,

 $('#btnReload').click(function (e) {
  var grid = $("#datagrid_Roads").data("kendoGrid");         
  grid.dataSource.filter({});
  grid.dataSource.read();
  grid.refresh();
});
Jaimin
  • 7,964
  • 2
  • 25
  • 32