CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4kendo-uikendo-grid
Bhupendra Shukla
Bhupendra Shukla

Reputation: 3914

Hierarchy Kendo Grid is not working properly in Mvc 4

I have created a kendo hierarchy grid in mvc 4. On execution of the grid, the hierarchy grid is expand automatically for the first row, but when i expand the another row then the new hierarchy grid comes up empty while the data of the earlier hierarchy grid (which comes up by default) was changed.

1. How can i make it to show data in the hierarchy grid for the particular row only not in the default opened grid?

2. Also how can i prevent the default expansion of the row.

View:

 @(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.name).Title("Name");
                columns.Bound(p => p.gender).Title("Gender");
                columns.Bound(p => p.designation).Title("Designation").Width("300px");
                columns.Bound(p => p.department).Title("Department").Width("300px");
            })
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:430px;" })
            .Pageable()
            .Navigatable() 
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource // Configure the grid data source
            .Ajax()
            .Model(model =>
            {
                model.Id(x => x.id);
            })
           .Read(read => read.Action("Employee_Read", "Home")) // Set the action method which will return the data in JSON format  
           )
           .Events(events => events.DataBound("dataBound"))
          )

 <script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
            .Name("grid_#id#")
            .Columns(columns =>
            {
                columns.Bound(p => p.id).Width(70);
                columns.Bound(p => p.name).Width(110);
                 columns.Bound(p => p.gender).Width(110);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("Department_Read", "Home", new { employeeID = "#=id#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
    </script>
    <script>
        function dataBound() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
    </script>

Controller:

public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)
        {
            //code for grid 
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 public ActionResult Department_Read(Int32 employeeID, [DataSourceRequest]DataSourceRequest request)
        {
            // Code for hierarchy grid detail
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Upvotes: 1

Views: 1697

Answers (1)

Emmanuel M.
Emmanuel M.

Reputation: 441

  1. You made a mistake in your detail Template you should use .Name("grid_#=id#") instead of .Name("grid_#id#") the '=' matters.Causing all of your hierarchy-grids to share the same id so only the first grid is refreshed everytime.
  2. your databound() function is causing the expansion of the first by default (and everytime the grid is bound to it datasource.)

Upvotes: 0

Related Questions