/datagrid-how-to-use-dropdownbox-as-a-column-editor-in-edit-mode-t548916

DevExtreme, DevExtreme (HTML JS), Data Grid

Primary LanguageJavaScriptOtherNOASSERTION

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.

use-dropdownbox

Implementation Details

  1. 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;
        }
    }
}

  2. Implement the contentTemplate function. In this template:

    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;
};

Files to Look At

Documentation

More Examples