Loading Grid Data based on Drop-down List Selection

[Chinonso]

Hello,

I need to reload the grid based on a  selection from a drop-down list.  I don't want to pre-load the grid and then filter, I only want  the grid to be populated after a change in selected value.
I have the drop-down list, and  the onChange event set up and working, the problem i am having is with the grid, its not re-loading or re-freshing with the data that is returned and i don't know why. Here is my code.

Index.cshtml

<div class="demo-section k-content">
    <h4>Parents:</h4>
    @(Html.Kendo().DropDownList()
              .Name("parents")
              .HtmlAttributes(new { style = "width:25%" })
              .OptionLabel("Select parent...")
              .DataTextField("FirstName")
              .DataValueField("ParentId")
              .Events(e => e.Change("onChange"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetParents", "ParentChild");
                  });
              })
    )
</div>

<br class="clear" />
<br />
@(Html.Kendo().Grid<JustTestingWeb.Models.ChildViewModel>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(c => c.ChildId).Title("ChildID").Width(40);
              columns.Bound(c => c.ChildParentID).Title("ParentID").Width(40);
              columns.Bound(c => c.FirstName).Width(80);
              columns.Bound(c => c.LastNme).Width(80);
          })
          .Pageable()
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .AutoBind(false)
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(false)
              .PageSize(5)
              .Model(model => { model.Id(p => p.ChildId);  })
              .Read(read => read.Action("Get_Child_By_Id", "ParentChildController").Data("additionalData"))
          )
    )

<script type="text/javascript">
    $(document).ready(function () {
        var parents = $("#parents").data("kendoDropDownList");

        $("#get").click(function () {
            var parentInfo = "\nParent: { parentid: " + parents.value() + ", pfname: " + parents.text() + " }";
        });
    });

    function additionalData(e) {
        var value = $("#parents").data("kendoDropDownList").value();
        return { parentid: value }; // send the parent id value as part of the Read request
    }

    function onChange() {
        var pid= this.value();
        alert(pid);
        $.get('/ParentChild/Get_Child_By_Id', { parentid: pid}, function (data) {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read(); // rebind the Grid's DataSource
        })
    }
</script>
<style>
    .k-readonly {
        color: gray;
    }
</style>

And here is the controller class

public class ParentChildController : Controller
{
    public DbQuery db = new DbQuery();
    // GET: ParentChild
    public ActionResult Index()
    {
        return View();
    }


    public JsonResult GetParents()
    {
        var parents= db.GetParents();

        return Json(parents.Select(p => new { ParentId = p.ParentId, FirstName = p.FirstName }), JsonRequestBehavior.AllowGet);
    }

    public  ActionResult Get_Child_By_Id([DataSourceRequest]DataSourceRequest request, int parentid)
    {
        var result = db.GetChildren(parentid);

        var children = result
            .Select(c => new ChildViewModel(c.ChildParentID,c.ChildId,c.FirstName,c.LastNme))
            .ToList();

        return Json(children.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

}

[Chinonso]

It works, the problem was in the  Grid-view section

i changed 

.Read(read => read.Action("Get_Child_By_Id", "ParentChildController").Data("additionalData"))

To

.Read(read => read.Action("Get_Child_By_Id", "ParentChild").Data("additionalData"))

[Stefan]

Hello Chinonso,

I'm glad to hear that the issue is resolved.

Also, thank you for sharing the solution with the Kendo UI community. This is very helpful if someone else has a similar issue.

Regards,
Stefan
Telerik by Progress

[Antony]

Thanks for this Chinoso - it helped me. I suggest since you already have your additionalData function defined, the onChange function could simply be:

function onChange() {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();

}
This worked for me.