Loading Grid Data based on Drop-down List Selection

3 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    36 posts
    Member since:
    Jan 2017

    Posted 19 May Link to this post

    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);
        }
     
    }
  2. Chinonso
    Chinonso avatar
    36 posts
    Member since:
    Jan 2017

    Posted 19 May in reply to Chinonso Link to this post

    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"))
  3. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 23 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top