Change Kendo Grid DataSource specific field with jQuery

Question

I'm new to Kendo UI and would appreciate your advice.

I have a Partial view that renders Kendo Grid:

<div class="accountsWindow" hidden="hidden">    
    @Html.Partial("AccountsGrid", context.CustomerAccounts)    
</div>

The view: AccountsGrid.cshtml

@model IEnumerable<DAL.Model.CustomerAccount>

<div id="grid">
    @(Html.Kendo().Grid(Model)
      .Name("AccountsGrid")
      .Columns(columns =>
      {
          columns.Bound(u => u.CUSTOMER_NO)
          ...    
      })
     .Pageable().HtmlAttributes(new {id="AccGrid" })
    )
</div>

My first problem is when I try to access the grid:

var grid = $("#AccGrid").data("kendoGrid");

It is undefined. Can it be because of hidden Partial?

And second- I would like to change existing dataSource for context.CustomerAccounts.Where(c=>c.CUSTOMER_NO == someValue) dynamically but cannot find a solution.

You won't be able to access the Partial View Grid directly on main page in document ready function, but if you wish to make any changes on the Grid then create DataBound Event on the Grid and then update any changes you wish like filtering etc. — D_Learning
@D_Learning, could you please clarify, I added the event Events(ev => ev.DataBound("dtBound")) but my function is not firing neither in main page not in partial. Could you please provide an example? — Gyuzal R
Did you try passing the filtered value to the partial view for setting the Partial view source as filtered. i.e. : @Html.Partial("AccountsGrid", context.CustomerAccounts.Where(c=>c.CUSTOMER_NO == someValue)) Regarding the accessing the values in the partial view Grid add the scripts of events like DataBound or Document ready in the partial view. — D_Learning

LittleDragon LittleDragon · Accepted Answer · 2014-08-08T11:57:48

And you can use json + jQuery for the change your data source

var grid = $("#AccountsGrid").data("kendoGrid");
grid.setDataSource(dataSource);

Change Kendo Grid DataSource specific field with jQuery

1 Answers