This example illustrates how to embed DevExtreme ASP.NET MVC DropDownBox into an edit cell in the DevExtreme ASP.NET MVC DataGrid.
Refer to the DevExtreme DataGrid - How to use DropDownBox as a column editor in edit mode example to see how to implement this task on the client.
Use the 'State' column's EditCellTemplate method to embed DropDownBox into the grid's edit cell.
@(Html.DevExtreme().DataGrid()
//...
columns.Add()
.DataField("StateID")
.Caption("State")
.EditCellTemplate(@<text>
@Html.Partial("DxDropDownBox")
</text>);
)Use the DropDownBox.ContentTemplate method to display DropDownBox content in table format (in the DataGrid). Handle the DataGrid.OnSelectionChanged event to pass the selected keys to DropDownBox. To adjust the DataGrid selection, handle the DropDownBox.OnValueChanged event.
@(Html.DevExtreme().DropDownBox()
//...
.OnValueChanged(@"function(args) { gridBox_valueChanged(args, setValue); }")
.ContentTemplate(@<text>
@(Html.DevExtreme().DataGrid()
//...
.Columns(columns =>
{
columns.Add().DataField("ID");
columns.Add().DataField("Name");
})
.OnSelectionChanged(@"function(args) { onSelectionChanged(args, component); }")
)
//...
</text>)
)function gridBox_valueChanged(args, setValueMethod) {
var $dataGrid = $("#dDBoxDataGrid");
if ($dataGrid.length) {
var dataGrid = $dataGrid.dxDataGrid("instance");
dataGrid.selectRows(args.value, false);
}
setValueMethod(args.value);
}
function onSelectionChanged(e, dropDownBoxInstance) {
var keys = e.selectedRowKeys;
dropDownBoxInstance.option("value", keys);
}