3-level hierarchy

[Vivido]

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?

[Daniel]

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

 

 

[Thomas]

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]

Is there not a "detailInit()" that can be used for Kendo grid in MVC?

[Eyup]

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.