Refresh Kendo UI grid on dropdown selected index change event

2
votes

Sorry to ask this common question again, but I am really not able to understand a few points. So, I have this grid which I have generated using Telerik Kendo UI. It's a very simple grid and I have this combo box on the page, which is outside the grid as an independent control. Of course, again this is a Telerik Kendo UI ComboBox control. Now, I am trying to implement a scenario where when the user changes the selection on Combobox, I want to pass the selection value to the action method and refresh the grid accordingly. I referred to few articles on StackOverflow and I found these useful links,

Kendo UI Grid Refesh on Dropdown Selection

How to refresh the Kendo UI grid

Reloading/refreshing Kendo Grid

All these links have provided this code line which will refresh grid on the client side,

var grid = $("#Product").data("**kendoGrid**");
grid.dataSource.read();

Now what I am unable to understand is what this above bold word 'kendoGrid' stands for i.e. what should be the parameter for the 'data' method?

I have implemented the below piece of code for my application but unfortunately, it's not working. Can anyone please point out what am I missing and how can I fix this code to get it working,

@(Html.Kendo()
        .DropDownList()
        .Name("ddlProject")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
         {
              source.Read(read => { read.Action("GetProjectsForCurrentUser", "Home"); });
         })
         .OptionLabel("Select a Project")
         .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                  .Events(e => e.Change("selectedIndexChanged")))

@Html.Action("LoadDefects")

@(Html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      {
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%");
          columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
          columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
      })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(200))
      .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid"))
                                          .PageSize(20)
                                          .ServerOperation(false))


var dataItem;

function refreshGrid() {
    return {
        selectedProject: dataItem
    };
}

function selectedIndexChanged(e) {
    dataItem = this.dataItem(e.item.index());
    var grid = $("#grid").data("kendoGrid");
    alert(grid);
    grid.dataSource.read();
    return;
}

    [ChildActionOnly]
    public ActionResult LoadDefects(string selectedProject = "")
    {
        var defectList = dBO.GetDefects(2, "2").ToList();
        for (int i = 0; i < 100; i++)
        {
            defectList.Add(defectList[0]);
        }
        return PartialView(defectList);
    }
2
javascriptkendo-uitelerikkendo-asp.net-mvc

2 Answers

5
votes

Since the id of your Kendo UI Grid is DefectGrid so you should use:

var grid = $("#DefectGrid").data("kendoGrid");
grid.dataSource.read();

You should not modify kendoGrid since the Widget that you want to update is a kendoGrid.

  • If you want to access a Kendo ListView you should do: $("#elem_id").data("kendoListView"); (being elem_id the id of the HTML element that includes the ListView).
  • If it is a DropDown List, then you should do $("#elem_id").data("kendoDropDownList");
  • and so on...

When KendoUI creates a Widget, it stores a reference to the object that holds the methods and private data to that Widget in data. This is something not specific of KendoUI but inherited from jQuery (see documentation about jQuery data here).

0
votes

your Grid read event:

 .Read(read => read.Action("My_Read", "Admin").Data("combodata"))

your change event function:

function selectedIndexChanged() {
                var grid = $("#DefectGrid").data("kendoGrid");

                grid.dataSource.read(); // rebind the Grid's DataSource
            }

And add this function

 function combodata(e) {

                var value = $("#ddlProject").data("kendoDropDownList").value();
                return { ID: value };
                }

Edit : Don't forget reading id in controller 

 public ActionResult my_Read([DataSourceRequest] DataSourceRequest request,int ID)