CODEWITHSUNDEEP
kendo-uikendo-gridkendo-asp.net-mvc
Balwinder Pal
Balwinder Pal

Reputation: 97

Rebind Kendo Grid in MVC

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/[email protected]" class="access_btn">
     </a><a href="../Utilities/[email protected]" class="notes_btn"></a><a href="../Utilities/[email protected]" class="edit_btn">
     </a><a href="../Utilities/[email protected]" 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);
        });

Upvotes: 2

Views: 7504

Answers (3)

Kemal Duran
Kemal Duran

Reputation: 1522

try this:

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

Upvotes: 0

Jeff
Jeff

Reputation: 522

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

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30661

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

Upvotes: 2

Related Questions