kendo grid data depending on another kendo grid results UI for Asp.Net MVC

Question

I Have two Kendo Grids (UI for Asp.Net MVC) on my page. The first grid gets results from database using an action method of a controller which is bound at grid initialization(I guess). The second grid should get the results of a column from first grid and pass as parameters to second grid which should pass these to action method of another controller bound to second grid. I tried to use autobind(false) but has no use. Please suggest.

Hook into the change event of the datagrid, fetch the selected id and pass it along to the next grid. The link in the sample gives you everything you need, but without any code examples of what you've accomplished so far, there's not much more to advise on. — Juliën

Jayesh Goyani Jayesh Goyani · Accepted Answer · 2015-08-15T19:21:14

Please try with the below code snippet.

VIEW

@(Html.Kendo().Grid<MvcApplication1.Models.TestModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.ID);
        columns.Bound(e => e.Name);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetData", "Home"))
     )
     .Events(events => events.Change("onChange"))
      .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single))

)

@(Html.Kendo().Grid<MvcApplication1.Models.ChildModel>()
    .Name("ChildGrid")
    .Columns(columns =>
    {
        columns.Bound(e => e.ChildID);
        columns.Bound(e => e.ChildName);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetChildData", "Home").Data("GetData"))
     )
)

<script>
    var ID = 0;
    var Name = "";
    function onChange(arg) {
        ID = this.dataItem(this.select()).ID;
        Name = this.dataItem(this.select()).Name;

        $('#ChildGrid').data('kendoGrid').dataSource.read();
        $('#ChildGrid').data('kendoGrid').refresh();
    }
    function GetData() {
        return {
            ID: ID,
            Name: Name
        };
    }
</script>

CONTROLLER

public ActionResult GetChildData([DataSourceRequest] DataSourceRequest request, int ID, string Name)
{
    List<ChildModel> lst = new List<ChildModel>();

    if (ID == 0)
    {
        return Json(lst.ToDataSourceResult(request));
    }

    string str = ":" + ID + "_" + Name;


    lst.Add(new ChildModel() { ChildID = 1, ChildName = "Name1" + str });
    lst.Add(new ChildModel() { ChildID = 2, ChildName = "Name2" + str });
    lst.Add(new ChildModel() { ChildID = 3, ChildName = "Name3" + str });

    return Json(lst.ToDataSourceResult(request));
}

public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
    List<TestModel> lst = new List<TestModel>();
    lst.Add(new TestModel() { ID = 1, Name = "Name1", MyDate = DateTime.Now });
    lst.Add(new TestModel() { ID = 2, Name = "Name2", MyDate = DateTime.Now });
    lst.Add(new TestModel() { ID = 3, Name = "Name3", MyDate = DateTime.Now });

    return Json(lst.ToDataSourceResult(request));
}

MODEL

namespace MvcApplication1.Models
{
    public class TestModel
    {
        public int ID { get; set; }
        public string Name { get; set; }

        [DataType(DataType.DateTime)]
        public DateTime? MyDate { get; set; }
    }

    public class ChildModel
    {
        public int ChildID { get; set; }
        public string ChildName { get; set; }
    }
}

Let me know if any concern.

kendo grid data depending on another kendo grid results UI for Asp.Net MVC

2 Answers

Here is the steps: