title: Refresh Kendo UI grid on dropdown selected index change event
body: <p>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,</p>
  
  <p><a href="https://stackoverflow.com/questions/15462541/kendo-ui-grid-refesh-on-dropdown-selection">Kendo UI Grid Refesh on Dropdown Selection</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16471046/kendo-ui-grid-refresh">How to refresh the Kendo UI grid</a></p>
  
  <p><a href="https://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid">Reloading/refreshing Kendo Grid</a></p>
  
  <p>All these links have provided this code line which will refresh grid on the client side,</p>
  
  <pre><code>var grid = $("#Product").data("**kendoGrid**");
  grid.dataSource.read();
  </code></pre>
  
  <p><em>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?</em></p>
  
  <p>I have implemented the below piece of code for my application but unfortunately, it's not working. <em>Can anyone please point out what am I missing and how can I fix this code to get it working,</em></p>
  
  <pre><code>@(Html.Kendo()
          .DropDownList()
          .Name("ddlProject")
          .DataTextField("Text")
          .DataValueField("Value")
          .DataSource(source =&gt;
           {
                source.Read(read =&gt; { read.Action("GetProjectsForCurrentUser", "Home"); });
           })
           .OptionLabel("Select a Project")
           .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                    .Events(e =&gt; e.Change("selectedIndexChanged")))
  
  @Html.Action("LoadDefects")
  
  @(Html.Kendo()
        .Grid(Model)
        .Name("DefectGrid")
        .Columns(columns =&gt;
        {
            columns.Bound(d =&gt; d.DefectId).Title("ID").Width("5%");
            columns.Bound(d =&gt; d.Title).Title("Title").Width("20%");
            columns.Bound(d =&gt; d.Severity).Title("Severity").Width("10%");
            columns.Bound(d =&gt; d.Status).Title("Status").Width("10%");
            columns.Bound(d =&gt; d.Description).Title("Description").Width("20%");
            columns.Bound(d =&gt; d.LoggedBy).Title("LoggedBy").Width("10%");
            columns.Bound(d =&gt; d.LoggedOn).Title("LoggedOn").Width("10%");
        })
        .Pageable()
        .Sortable()
        .Scrollable(scr =&gt; scr.Height(200))
        .DataSource(dataSource =&gt; dataSource
                                            .Ajax()
                                            .Read(read =&gt; 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 &lt; 100; i++)
          {
              defectList.Add(defectList[0]);
          }
          return PartialView(defectList);
      }
  </code></pre>