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

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

See Also

In this article