New to Telerik UI for ASP.NET Core? Download free 30-day trial

Create Nested Hierarchy of Components Using Grid Selectoins


Product Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version Created with the 2022.3.913 version


How can I use the selection of a Grid in a hierarchy of Components?


To achieve the desired scenario:

  1. Implement a Custom Command Button in the Toolbar.
  2. Handle the "Click" Event of the Custom Command Button.
  3. In the Click Event handler, get the selected rows of the Main Grid. Use the "select" method for the case.
  4. Create a collection of the dataItems by using the selected rows.
  5. Open the Window.
  6. For the Content part of the Window, we are implementing a div element for the Telerik UI Wizard. Now we can initialize it.
  7. Implement the desired steps in the Wizard - Grid, Percent Input, Stored Procedure.
  8. Use the collection from point 4 as a dataSource for the newly created Grid.
  9. Here is an example:
            .ToolBar(t => t.Custom().Text("Adjust Multiple Standard Prices").HtmlAttributes(new { id = "customCommand" }))
            .Columns(columns =>
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("Orders_Read", "Grid"))

           .Title("About Alvar Aalto")
           .Content(@<text><div id="wizard"></div></text>)
           .Position(p => p.Top(200).Left(200))
           .Actions(actions => actions.Pin().Minimize().Maximize().Close())
           .Events(e => e.Close("onWindowClose"))
    var percentInputFlag = false;

    $("#customCommand").click(function (e) {

        var grid = $("#grid").data("kendoGrid");

        var rows =,
            items = [];

        var window = $("#window").data("kendoWindow");

        rows.each(function (e) {
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(this);

            pager: true,
            select: function (e) {
                if (e.step.options.title == "Percent Step" && !percentInputFlag) {
                        label: "Percent input"
                    percentInputFlag = true;
            done: function (e) {
            steps: [    
                    title: "Grid Details",
                    content: "<div id='childGrid'></div>"
                    title: "Percent Step",
                    content: "Percent input: <input id='percentInput' type='number' value='30' min='0' max='100'/>"
                    title: "Stored Procedure",
                    content: "<h2>Execute the Stored Procedure</h2>"




    function createChildGrid(items) {
            dataSource: items,
            height: 350,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            columns: [{
                field: "ShipName",
                title: "ShipName"
            }, {
                field: "ShipCity",
                title: "ShipCity"

    function onWindowClose() {
        percentInputFlag = false;

See Also

In this article