Creating Nested Hierarchy of Components Using Grid Selections

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC 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 MVC 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.

Index.cshtml

        @(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"))
)

JavaScript

<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 MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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