DataGrid - How to use DropDownBox as a column editor in edit mode
This example illustrates how to define a DropDownBox with an embedded DataGrid for the State column.
Implementation Details
-
Handle the onEditorPreparing event. In the event handler, change the editorName and editorOptions parameters to specify the DropDownBox settings.
function onEditorPreparing(e) { if (e.dataField == "StateID" && e.parentType == "dataRow") { e.editorName = "dxDropDownBox"; e.editorOptions.dropDownOptions = { height: 500 }; e.editorOptions.contentTemplate = function (args, container) { //custom template; } } }
-
Implement the contentTemplate function. In this template:
- Define DataGrid and handle its selectionChanged event to pass the selected keys to dxDropDownBox.
- Handle the DropDownBox.valueChanged event to adjust DataGrid selection.
e.editorOptions.contentTemplate = function (args, container) { var value = args.component.option("value"), $dataGrid = $("<div>").dxDataGrid({ dataSource: args.component.option("dataSource"), keyExpr: "ID", //code selection: { mode: "multiple" }, selectedRowKeys: value, onSelectionChanged: function (selectedItems) { var keys = selectedItems.selectedRowKeys; args.component.option("value", keys); } }); var dataGrid = $dataGrid.dxDataGrid("instance"); args.component.on("valueChanged", function (args) { var value = args.value; dataGrid.selectRows(value, false); }); container.append($dataGrid); $("<div>").dxButton({ text: "Close", onClick: function (ev) { args.component.close(); } }).css({ float: "right", marginTop: "10px" }).appendTo(container); return container; };