Skip to content

Latest commit

 

History

History
169 lines (144 loc) · 6.86 KB

grid-column-display-nested-grid.md

File metadata and controls

169 lines (144 loc) · 6.86 KB
title description type page_title slug tags res_type
Displaying a Nested Grid in a Grid Column Template
An example on how to display a nested Grid in the Telerik UI for {{ site.framework }} Grid column.
how-to
Displaying a Nested Grid in a Grid Column Template
grid-column-display-nested-grid
grid, column, template, nested, grid, button, toggle
kb

Environment

Product {{ site.product }} Grid
Progress {{ site.product }} version Created with the 2024.2.514 version

Description

How can I display a button in a specified Grid column that toggles a nested Grid?

Solution

Here are the steps for implementation:

  1. Integrate a Button and a hidden Grid in the main Grid's column by using the [Template component]({% slug htmlhelpers_overview_template %}):

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(f => f.Id)
            .ClientTemplate(Html.Kendo().Template()
                .AddComponent(x => x
                    .Button()
                    .Name("detailsBtn_${data.Id}")
                    .Content("Expand")
                    .Events(ev => ev.Click("onDetailsClick"))
                )
                .AddHtml("<div class='gridContainer'>")
                .AddComponent(x => x
                    .Grid<DetailsViewModel>()
                        .Name("detailsGrid_${data.Id}")
                        .AutoBind(false) // Prevent the initial Read request during the Grid's initialization.
                        .Columns(c =>
                        {
                            c.Bound(x => x.Id);
                            c.Bound(x => x.Name);
                        })
                        .Scrollable()
                        .HtmlAttributes(new { style = "height: 200px;"})
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .Read(read => read.Action("DetailsRead", "Grid"))
                        )
                )
                .AddHtml("</div>")
            );
    })
    // Other configuration.
)

    {% if site.core %}

        @addTagHelper *, Kendo.Mvc

    <kendo-grid name="grid">
        <columns>
            <column field="Id">
                <column-template>
                    <kendo-button name="detailsBtn_${data.Id}" on-click="onDetailsClick">
                        Expand
                    </kendo-button>
                    <div class='gridContainer'>
                        <kendo-grid name="detailsGrid_${data.Id}" auto-bind="false" height="200">
                            <columns>
                                <column field="Id"></column>
                                <column field="Name"></column>
                            </columns>
                            <scrollable enabled="true" />
                            <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
                                <schema data="Data" total="Total" errors="Errors">
                                    <model id="Id"></model>
                                </schema>
                                <transport>
                                    <read url="@Url.Action("DetailsRead","Grid")"/>
                                </transport>
                            </datasource>
                        </kendo-grid>
                    </div>
                </column-template>
            </column>
        </columns>
        <!-- Other configuration -->
    </kendo-grid>

    {% endif %}

  2. Hide the div element that wraps the Grid declaration:

    <style>
    .gridContainer {
        display: none;
    }
</style>

  3. Handle the click event of the Expand button and toggle the Grid's container. Get a reference to the Grid and call the read() method of its DataSource by passing the Id field to the server to filter the data based on the data item of the current row (the main Grid's row).

    function onDetailsClick(e) {
        var id = $(e.target).attr("id").split("_")[1];
        var btnLabel = $(e.target).find(".k-button-text").html(); // Get the current label of the Button.
        if (btnLabel == "Expand") {
            $(e.target).find(".k-button-text").html("Collapse");
        } else $(e.target).find(".k-button-text").html("Expand");

        $(e.target).next().toggle(); // Toggle the visibility of the nested Grid.
        var grid = $(`#detailsGrid_${id}`).data("kendoGrid").dataSource.read({ parentId: id });
    }
    public ActionResult DetailsRead([DataSourceRequest] DataSourceRequest request, int parentId)
    {
        var filteredData = gridData.Where(x => x.Id == parentId); // Filter the nested Grid based on the "Id" of the parent record.
        return Json(filteredData.ToDataSourceResult(request));
    }

More {{ site.framework }} Grid Resources

  • [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})

  • [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)

{% if site.core %}

{% else %}

See Also