This is a migrated thread and some comments may be shown as answers.

3-level hierarchy

1 Answer 369 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vivido
Top achievements
Rank 1
Vivido asked on 20 Mar 2015, 08:33 AM
Hi, I'm trying to make a 3-level hierarchic grid. I've seen some example doing this but in my case the nested one is still dependent from the more external and I cannot access ID to populate it.
My code:

@(Html.Kendo().Grid<RateDayViewModel>()
            .Name("dayGrid")
            .Columns(columns =>
            {
              columns.Bound(o => o.Date).Format("{0:d}");
            })
               .ClientDetailTemplateId("channelTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                  model.Id(p => p.DayID);
                })
                .PageSize(10)
                .Read(read => read.Action("ReadSummary", "Rate"))
            )
            .Pageable()
    )
<script id="channelTemplate" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<RateChannelViewModel>()
            .Name("day_#=DayID#")
            .Columns(columns =>
            {
              columns.Bound(o => o.Channel.Label).Title("Channel");
            })
                        .ClientDetailTemplateId("roomTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.ChannelID);
                })
                            .Read(read => read.Action("ReadChannels", "Rate", new { Day = "#=DayID#" }))
            )
            .ToClientTemplate()
    )
</script>
<script id="roomTemplate" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<RateRoomViewModel>()
            .Name("room_#=DayID##=ChannelID#")
            .Columns(columns =>
            {
              columns.Bound(o => o.Room.Label).Title("Room");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.RoomID);
                })
                .Read(read => read.Action("ReadRooms", "Rate", new { Day = "#=DayID#", Channel = "#=ChannelID#"}))
            )
            .ToClientTemplate()
    )
</script>

In the last one (Grid Room) I cannot access DayID property. How can I accomplish this?

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 24 Mar 2015, 08:42 AM
Hello,

The simplest option would be to include DayID in the RateChannelViewModel. An alternative would be to use the request data function to retrieve the DayID value via JavaScript e.g.
Html.Kendo().Grid<RateRoomViewModel>()
    .Name("room_#=ChannelID#")
    ...
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.RoomID);
        })
        .Read(read => read.Action("ReadRooms", "Rate", new { Channel = "#=ChannelID#"}).Data("function() { return getDayID('room_#=ChannelID#');}"))
    )
function getDayID(gridId) {
    var masterRow = $("#" + gridId).closest("tr").parent().closest("tr").prev();
    var masterGrid = $("#dayGrid").data("kendoGrid");
    var item = masterGrid.dataItem(masterRow);       
    return {
        Day: item.DayID
    };
}


Regards,
Daniel
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Thomas
Top achievements
Rank 1
Iron
commented on 13 Aug 2021, 01:01 PM | edited

I'm having the same issue with a 3rd nested grid when trying to expand an item, it errors out with "Id is undefined" yet the first nested grid works fine.  Does this control not have an internal convention as to how it gets the Ids of nested grids?

 

Thomas
Top achievements
Rank 1
Iron
commented on 13 Aug 2021, 01:06 PM

Is there not a "detailInit()" that can be used for Kendo grid in MVC?
Eyup
Telerik team
commented on 17 Aug 2021, 11:27 AM

Yes, there are 2 ways of achieving hierarchy with the MVC grid:

1. ClientTemplateID:
https://demos.telerik.com/aspnet-mvc/grid/hierarchy

2. .Events(e=>e.DetailInit("detailInit")) event handler:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailinit

Feel free to choose the one that best matches your requirements.

Tags
Grid
Asked by
Vivido
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or