Rebind Kendo Grid in MVC

Question

I am trying to rebind Kendo Grid on a button click after filtering data using the JavaScript below, but it is not working. What should I do?

My HTML code using Kendo.Mvc.Dll:

Html.Kendo().Grid<EquityStreet.Data.ESData.Proc_GetESManagersListAndFilterResult>().Name("GridESManager").BindTo(Model.ESManagersList).Columns(columns =>
 {
     columns.Bound(m => m.pkESManagerId).Template(@<input type="checkbox" id="@item.pkESManagerId" />).Title("").Width("2%");
     columns.Bound(m => m.pkESManagerId).Template(@<text> @item.FirstName @item.LastName</text>).Title("Name");
     columns.Bound(m => m.CompanyName).Title("Company");
     columns.Bound(m => m.MobileNo).Title("Phone Number");
     columns.Bound(m => m.ESManagerStatus).Template(@<text>@(item.ESManagerStatus == 1 ? "Active" : "Inactive")</text>).Title("Status");
     columns.Bound(m => m.pkESManagerId).Template(@<text> <a href="../Utilities/NewESManager?EId=@item.pkESManagerId" class="access_btn">
     </a><a href="../Utilities/NewESManager?EId=@item.pkESManagerId" class="notes_btn"></a><a href="../Utilities/NewESManager?EId=@item.pkESManagerId" class="edit_btn">
     </a><a href="../Utilities/NewESManager?EId=@item.pkESManagerId" class="delete_btn"></a>
            </text>).Title("Actions");
 }).ToolBar(tb =>
 {
     tb.Template("<div class='GridSearchHeader'><div style='float:left'><input type='button' value='Reset Pwd'><input type='button' value='Delete'></div><label>Filter: </label><input type='search' style='width: 230px' id='txtSearch'><select id='Status'><option value=-1>Select</option><option value=1>Active</option><option value=0>Inactive</option></select><input type='button' onclick='FilterList()' value='Go'><input type='button' value='Reset'></div>");
 }).Pageable()
                              )

JavaScript:

 $.post('@Url.Action("FilterESManagerList", "../../Utilities")', { Keyword: Search, UserStatus: status }, function (result) {
            var grid = $("#GridESManager").data("kendoGrid");
            grid.dataSource.data(result);
            grid.refresh();
            alert(grid);
        });

Can you please check the above link if it helps you.[Kendo UI DataSource Refresh][1] [1]: http://stackoverflow.com/questions/18459848/kendo-ui-datasource-refresh/21727407#21727407 — Vaibhav, Jul 15 '14 at 06:04

score 2 · Answer 1 · answered Jul 18 '12 at 10:23

2

Calling grid.dataSource.data(result) should rebind the grid unless the result is not in the expected format.

answered Jul 18 '12 at 10:23

Atanas Korchev

30,562
8
59
93

result is in correct format. When i check it using firebug it says grid.dataSource.data(result)- data is not a function grid.dataSource.read()- read is not a function I have tried it many times but not working & checked everything. When I tried grid.dataSource=result; It assined, but not rebind grid. grid.dataSource.fetch()- fetch is not a function – Balwinder Pal Jul 19 '12 at 04:21
Hi Atanas Korchev, Can you please provide me your email so i can send you sample project? Thanks – Balwinder Pal Jul 19 '12 at 04:28
1

I have found the error. Error is i was not import Now Filter & rebind is working fine, but another issue arises of Now Templates are not working. Do you have any alternative for it? It should work like telerik Grid. Thanks – Balwinder Pal Jul 19 '12 at 06:10

score 0 · Answer 2 · answered Jun 11 '13 at 14:05

0

It looks that when using ajax-binding, calling grid.dataSource.fetch() will trigger the read method defined in the datasource and rebind automatically.

answered Jun 11 '13 at 14:05

Jeff

522
7
26

score 0 · Answer 3 · answered Jun 27 '14 at 22:51

0

try this:

$("#gridName").data("kendoGrid").dataSource.sync();

answered Jun 27 '14 at 22:51

Kemal Duran

1,478
1
13
19

Rebind Kendo Grid in MVC

3 Answers3