Creating a DropDownList Command Column in the Grid
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2022.2.802 version |
Description
How can I implement an always visible DropDownList command template for the Telerik UI for ASP.NET MVC Grid?
Solution
To achieve the desired scenario:
- Specify a DropDownList command template by using the
.Template()configuration option for a custom command. - Within the template, specify an empty
<input>tag and decorate it with a common class that will be used for rendering a DropDownList for each rows respectively. - Create a common
DataSourcefor the DropDownList. - Traverse through each records by handling the
DataBoundevent of the Grid. To initialize the DropDownlists, use the previously decorated common class for the custom command input. - Handle each of the command options by subscribing to the
Changeevent of the DropDownLists.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => { command.Custom("myCommand").Template("<input class='dropDownTemplate'/>"); }).Width(172);
})
.ToolBar(toolbar =>toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Events(e => e.DataBound("onDataBound"))
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
<script type="text/javascript">
var ddlDataSource = [ // Create a common DataSource.
{
value: 1,
displayValue: "Command1"
},
{
value: 2,
displayValue: "Command2"
}
];
function onDataBound(e){
var grid = e.sender; // Get the Grid's reference.
var items = e.sender.items(); // Get the Grid's data items.
items.each(function(e) { // Traverse through each of the items.
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate'); // Retrieve the current input element.
$(ddt).kendoDropDownList({ // Initialize a DropDownList.
value: dataItem.value,
change: onChange,
dataSource: ddlDataSource,
optionLabel: "Select a command...",
dataTextField: "displayValue",
dataValueField: "value"
});
});
}
function onChange(e){
var command = e.sender.text(); // Get the current text.
switch(command){
case "Command1":
alert(command+" "+"is selected.");
break;
case "Command2":
alert(command+" "+"is selected.")
break;
default:
break;
}
}
</script>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on implementing a DropDownList command column in the Grid.