Your search did not match any results.
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 widget is the Status column's default editor, and the editorOptions object is used to specify the widget's itemTemplate.

If the default editor is unsuitable, replace it with a custom editor by specifying an editCellTemplate. In this template, configure the replacement editor's appearance and behavior. In this demo, the default editors in the Owner and Assignees columns are replaced with the DropDownBox and TagBox widgets.

Copy to CodePen
Apply
Reset
$(function(){ $("#gridContainer").dxDataGrid({ dataSource: DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: url + "/Tasks", updateUrl: url + "/UpdateTask", insertUrl: url + "/InsertTask", onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; } }), showBorders: true, paging: { enabled: true, pageSize: 15 }, headerFilter: { visible: true }, searchPanel: { visible: true }, editing: { mode: "cell", allowUpdating: true, allowAdding: true }, onRowInserted: function(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: function(container, options) { var noBreakSpace = "\u00A0", text = (options.value || []).map(function(element) { return options.column.lookup.calculateCellValue(element); }).join(", "); container.text(text || noBreakSpace).attr("title", text); }, calculateFilterExpression: function(filterValue, selectedFilterOperation, target) { if(target === "search" && typeof(filterValue) === "string") { return [this.dataField, "contains", filterValue] } return function(data) { return (data.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: function(itemData, itemIndex, itemElement) { if(itemData != null) { var imageContainer = $("<span>").addClass("status-icon middle").appendTo(itemElement); $("<img>").attr("src", "images/icons/status-" + itemData.id + ".png").appendTo(imageContainer); $("<span>").addClass("middle").text(itemData.name).appendTo(itemElement); } else { $("<span>").text("(All)").appendTo(itemElement); } } } } ] }); function dropDownBoxEditorTemplate(cellElement, cellInfo) { return $("<div>").dxDropDownBox({ dropDownOptions: { width: 500 }, dataSource: employees, value: cellInfo.value, valueExpr: "ID", displayExpr: "FullName", contentTemplate: function(e) { return $("<div>").dxDataGrid({ dataSource: employees, remoteOperations: true, columns: ["FullName", "Title", "Department"], hoverStateEnabled: true, scrolling: { mode: "virtual" }, height: 250, selection: { mode: "single" }, selectedRowKeys: [cellInfo.value], focusedRowEnabled: true, focusedRowKey: cellInfo.value, 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", showSelectionControls: true, maxDisplayedTags: 3, showMultiTagOnly: false, applyValueMode: "useButtons", searchEnabled: true, onValueChanged: function(e) { cellInfo.setValue(e.value) }, onSelectionChanged: function(e) { cellInfo.component.updateDimensions(); } }); } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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/19.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.1.6/js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@2.2.1/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; }
var statuses = [{ "id": 1, "name": "Not Started" }, { "id": 2, "name": "In Progress" }, { "id": 3, "name": "Deferred" }, { "id": 4, "name": "Need Assistance" }, { "id": 5, "name": "Completed" } ]; var url = "https://js.devexpress.com/Demos/Mvc/api/CustomEditors"; var employees = DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: url + "/Employees", onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; } });