Folgender Code zeigt, wie man in einem DataGrid dynamisch in eine Zelle ein Auswahl als DropDownBox lรคdt.
Das Beispiel basiert auf einer DevExtreme UserControls hier in Asp.Net Core MVC sowie der Verwendung zur Laufzeit in Javascript
Javascript jQuery Asp Core MVC
Devextreme Datagrid, SelectBox MultiSelect
//*==== Script for Devextreme Grid *======
function demo_customizeColumns(columns) { //------< customizeColumns() GridColumns anpassen >-------- //*Spalten anpassen nach dem Laden if (columns.length > 0) {
//----< @Loop: Columns >---- for (iCol = 0; iCol < columns.length; iCol++) { var col = columns[iCol]; if (col.dataField.includes("col_")) //col_1 { //-----< Columns >----- col.alignment = "left"; col.dataType = "string"; //todo: number col.showEditorAlways = false; col.cellTemplate= function (element,info) { element.append("<div>" + info.text + "</div>") .css("color", "blue"); } //col.editCellTemplate ="<select multiple='multiple'><option value='1'> r1</option><option value='2'>Lunch</option></select >"; //-----</ Columns >----- } } //----</ @Loop: Columns >----
} //------</ customizeColumns() GridColumns anpassen >-------- } function onEditorPreparing(e) { //------< onEditorPreparing() >-------- //*event on edit, called for each cell //e=editorelement var dataField = e.dataField; if (dataField != null) { if (dataField.includes("col_")) { //----< Setup Editor >---- e.editorName = "dxSelectBox"; const data = [{ DayNr: "1", DayText: 'Mo 01.09.2021' }, { DayNr: "2", DayText: 'Di 02.09.2021' }]; e.editorOptions.dropDownOptions = { height: 500, width:200 }; e.editorOptions.dataSource = data; e.editorOptions.valueExpr = "DayNr"; e.editorOptions.displayExpr = "DayText"; //----</ Setup Editor >---- } } } //------</ onEditorPreparing() >-------- //*====/ Script for Devextreme Grid *======
//e.editorName = "dxDropDownBox"; //e.editorOptions.contentTemplate = function (args, container) { //custom template } }
|
Code in Asp Core MVC View
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@*format Grid in javascript file *@ <script src="~/js/jsDemo.js"></script>
<form>
<div style="margin:10px"> grid with multiple date items in cell </div>
@*-------------< Grid >-----------------*@ <div id="divGrid" style="width:80%"> @(Html.DevExtreme().DataGrid() .ID("gridDataTable") .DataSource(d => d.Mvc().Controller("apiDemo").Key("IDKey") .LoadAction("getGridData") .UpdateAction("UpdateGridCell") ) .Editing(e => e.AllowAdding(false) .AllowDeleting(false) .AllowUpdating(true) .Mode(GridEditMode.Cell).UseIcons(true) )
.CustomizeColumns("customizeColumns") //define columns format .OnEditorPreparing("onEditorPreparing")
.AllowColumnResizing(true) ) </div> @*-------------</ Grid >-----------------*@
@*===========< Script >==========*@ <script> DevExpress.localization.locale("de"); </script> @*===========</ Script >==========*@
</form>
|
DevExtreme, DataGrid