Creating Nested Hierarchy of Components Using Grid Selections

Environment

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

Description

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

Solution

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, implement a div element for the Telerik UI for ASP.NET Core Wizard component. Now you can initialize it.
7. Implement the desired steps in the Wizard: Grid, Percent Input, and Stored Procedure.
8. Use the collection from step 4 as a DataSource for the newly created Grid.

The following sample code represents the steps described above.

        @(Html.Kendo().Grid<TelerikMvcApp50.Models.OrderViewModel>()
            .Name("grid")
            .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);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

        @(Html.Kendo().Window()
           .Name("window")
           .Title("About Alvar Aalto")
           .Content(@<text><div id="wizard"></div></text>)
           .Draggable()
           .Resizable()
           .Width(600)
           .Visible(false)
           .Modal(true)
           .Position(p => p.Top(200).Left(200))
           .Actions(actions => actions.Pin().Minimize().Maximize().Close())
           .Events(e => e.Close("onWindowClose"))
)

<script>
    var percentInputFlag = false;

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

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

        var rows = grid.select(),
            items = [];

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

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

        window.open();

        $("#wizard").kendoWizard({
            pager: true,
            select: function (e) {
                if (e.step.options.title == "Percent Step" && !percentInputFlag) {
                    $("#percentInput").kendoNumericTextBox({
                        label: "Percent input"
                    });
                    percentInputFlag = true;
                }
            },
            done: function (e) {
                e.originalEvent.preventDefault();
            },
            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>"
                }
            ],

        });

        createChildGrid(items);

    });

    function createChildGrid(items) {
        $("#childGrid").kendoGrid({
            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;
    }
</script>

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base