JavaScript/jQuery Data Grid - Custom Editors

Different editors can be used to edit cell values in grid columns. The default editor depends on the column configuration. The dependency is illustrated in the editorOptions object's description (this object is used to customize the default editor). In this demo, the SelectBox component is the Status column's default editor, and the editorOptions object is used to specify the component's itemTemplate.

Backend API

$(() => { $('#gridContainer').dxDataGrid({ dataSource: DevExpress.data.AspNet.createStore({ key: 'ID', loadUrl: `${url}/Tasks`, updateUrl: `${url}/UpdateTask`, insertUrl: `${url}/InsertTask`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }), showBorders: true, paging: { enabled: true, pageSize: 15, }, pager:{ visible: true, }, headerFilter: { visible: true, }, searchPanel: { visible: true, }, editing: { mode: 'cell', allowUpdating: true, allowAdding: true, }, onRowInserted(e) { e.component.navigateToRow(e.key); }, columns: [{ dataField: 'Owner', width: 150, allowSorting: false, lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, validationRules: [{ type: 'required' }], editCellTemplate: dropDownBoxEditorTemplate, }, { dataField: 'AssignedEmployee', caption: 'Assignees', width: 200, allowSorting: false, editCellTemplate: tagBoxEditorTemplate, lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, validationRules: [{ type: 'required' }], cellTemplate(container, options) { const noBreakSpace = '\u00A0'; const assignees = (options.value || []).map( (assigneeId) => options.column.lookup.calculateCellValue(assigneeId), ); const text = assignees.join(', '); container.text(text || noBreakSpace).attr('title', text); }, calculateFilterExpression(filterValue, selectedFilterOperation, target) { if (target === 'search' && typeof (filterValue) === 'string') { return [this.dataField, 'contains', filterValue]; } return function (rowData) { return (rowData.AssignedEmployee || []).indexOf(filterValue) !== -1; }; }, }, { dataField: 'Subject', validationRules: [{ type: 'required' }], }, { dataField: 'Status', lookup: { dataSource: statuses, valueExpr: 'id', displayExpr: 'name', }, validationRules: [{ type: 'required' }], width: 200, editorOptions: { itemTemplate(itemData, itemIndex, itemElement) { if (itemData != null) { const imageContainer = $('<span>').addClass('status-icon middle').appendTo(itemElement); $('<img>').attr('src', `images/icons/status-${itemData.id}.svg`).appendTo(imageContainer); $('<span>').addClass('middle').text(itemData.name).appendTo(itemElement); } else { $('<span>').text('(All)').appendTo(itemElement); } }, }, }, ], }); function dropDownBoxEditorTemplate(cellElement, cellInfo) { const selectedRowKeys = cellInfo.value !== null && cellInfo.value !== undefined ? [cellInfo.value] : [] return $('<div>').dxDropDownBox({ dropDownOptions: { width: 500 }, dataSource: employees, value: cellInfo.value, valueExpr: 'ID', displayExpr: 'FullName', inputAttr: { 'aria-label': 'Owner' }, contentTemplate(e) { return $('<div>').dxDataGrid({ dataSource: employees, remoteOperations: true, columns: ['FullName', 'Title', 'Department'], hoverStateEnabled: true, scrolling: { mode: 'virtual' }, height: 250, selection: { mode: 'single' }, selectedRowKeys: selectedRowKeys, focusedRowEnabled: true, focusedRowKey: cellInfo.value, onContextMenuPreparing: (e) => { e.items = []; }, onSelectionChanged(selectionChangedArgs) { e.component.option('value', selectionChangedArgs.selectedRowKeys[0]); cellInfo.setValue(selectionChangedArgs.selectedRowKeys[0]); if (selectionChangedArgs.selectedRowKeys.length > 0) { e.component.close(); } }, }); }, }); } function tagBoxEditorTemplate(cellElement, cellInfo) { return $('<div>').dxTagBox({ dataSource: employees, value: cellInfo.value, valueExpr: 'ID', displayExpr: 'FullName', inputAttr: { 'aria-label': 'Name' }, showSelectionControls: true, maxDisplayedTags: 3, showMultiTagOnly: false, applyValueMode: 'useButtons', searchEnabled: true, onValueChanged(e) { cellInfo.setValue(e.value); }, onSelectionChanged() { cellInfo.component.updateDimensions(); }, }); } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <script src="https://unpkg.com/devextreme-aspnet-data@5.0.0/js/dx.aspnet.data.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>

.status-icon { height: 16px; width: 16px; display: inline-block; margin-right: 8px; } .middle { vertical-align: middle; }

If the default editor is unsuitable, you can replace it with a custom editor. For this, implement an editCellTemplate that allows you to configure the replacement editor's appearance and behavior. To change the cell value and, optionally, the displayed value after the editor's value is changed, use the setValue() method of the editCellTemplate. In this demo, the default editors in the Owner and Assignees columns are replaced with the DropDownBox and TagBox components.