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:
- Implement a custom command button in the Toolbar.
- Handle the
Clickevent of the custom command button. - In the
Clickevent handler, get the selected rows of the main Grid. Use theselectmethod for the case. - Create a collection of the
dataItemsby using the selected rows. - Open the Window.
- 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.
- Implement the desired steps in the Wizard: Grid, Percent Input, and Stored Procedure.
- 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>