CODEWITHSUNDEEP
kendo-gridtelerik-gridtelerik-mvc
ary
ary

Reputation: 959

Telerik Kendo MVC 5 Master detail grids

Below I have code that display all employees in Kendo Grid. Now In this example let's say I want to display an employee's family member's name and age in a detail grid below each employee row. How can I do this? I tried looking on Telerik website, but I am not able to understand. Please advice. Thanks.

Model

 public class Emp
    {
        public int EmpID{ get; set; }
        public string FirstName{ get; set; }
        public string LastName { get; set; }
    }

 public class EmpFamily
    {
        public int EmpID{ get; set; }
        public string Name{ get; set; }
        public int Age { get; set; }
    }

Controller

public ActionResult Index(string SearchString)
    {
        var EmpRows = from S in db.Emp
                      select S;

        List<EmpRec> EmpList = new List<EmpRec>();
        foreach (Disk EmpRow in EmpRows)
        {
            EmpRec e = new EmpRec();

            e.EmpID = EmpRow.EmpID;
            e.FirstName = EmpRow.FirstName;
            e.LastName  = EmpRow.LastName ;
            EmpList.Add(e);
        }
        return View(EmpList);
    }

View

@model IEnumerable<TestProj.Models.EmpRec>
@using (Html.BeginForm())
{

}

@(Html.Kendo().Grid(Model)
        .Name("kGrid")
        .Pageable()
        .Columns(columns =>
        {
            columns.Bound(p => p.EmpID).Filterable(true).Title("ID");
            columns.Bound(p => p.FirstName).Title("First Name");
            columns.Bound(p => p.LastName ).Title("Last Name ");
        })
        .Navigatable()
        .DataSource(datasource => datasource
            .Ajax()
            .PageSize(15)
            .ServerOperation(false)

         )
)

Upvotes: 0

Views: 2311

Answers (2)

veena panakanapalli
veena panakanapalli

Reputation: 461

You have to use hierarchical grid. It is clearly explained in this demo. Try that and see if you are facing any issues and let me know. I have tried in my application and it worked well.

Grid / Hierarchy

Upvotes: 1

Ross Bush
Ross Bush

Reputation: 15185

You have to add a child template to your grid that would be keyed off of a key from your parent grid.

@(Html.Kendo().Grid(Model)
        .Name("kGrid")
        .Pageable()
        .Columns(columns =>
        {
            columns.Bound(p => p.EmpID).Filterable(true).Title("ID");
            columns.Bound(p => p.FirstName).Title("First Name");
            columns.Bound(p => p.LastName ).Title("Last Name ");
        })
        .Navigatable()
        .DataSource(datasource => datasource
            .Ajax()
            .PageSize(15)
            .ServerOperation(false)

         )
        .ClientDetailTemplateId("tmpGridDetail")
)


<script id="tmpGridDetail" type="text/kendo-tmpl"> 
        <div id="tabStripDetails">
            @(Html.Kendo().TabStrip().HtmlAttributes(new { @Class = "tabStrip" }) 
                .Name("tsDetail_#=SomParentGridID#")
                .Animation(animation =>
                {
                    animation.Enable(true);
                    animation.Open(config =>{config.Fade(FadeDirection.In);
                });
                })
                .Items(items =>
                {
                    items.Add().Text("Summary").LoadContentFrom(@Url.Action("SomePartialView1", "SomeController") + "?someID=#=SomeParentGridID#");
                    items.Add().Text("Detail").LoadContentFrom(@Url.Action("SomePartialView1", "SomeController")+"?someID=#=SomeParentGridID#");
                })
                .SelectedIndex(0)     
                .ToClientTemplate()
            )
        </div>
    </script>

I do not have an example with a grid in the detail, however, you could replace the template below with a KendoGrid. A few key points here : The #=SomeField# qualifier allows you to read the parent grids data and apply it in the template. Also, The .ToClientTemplate() must be called on your grid's configuration if it is to be a client template or child grid. One last thing of importance to note is that you should make sure all the child items have unique names. This is usually accomplished by using the parent unique key in the name of the item(s). If your EmpID is a unique id fro all items in the parent grid then you could name all the controls in the template something like .Name("grdChild_#EmpID");

Upvotes: 0

Related Questions