Mit der Funktion Column.customizeText kann man den angezeigten Text einer Spalte in DevExtreme Datengrid anpassen
Dabei wird nur der Text der Ausgabe angepasst. Man kann hier kein HTML Code oder ein Template einbinden.
Die Funktion zeigt beim Aufruf die Zelle mit value und valueText an.
Code in js File
|
//*==== 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.customizeText = function (cell) { var cellValue = cell.value; if (cellValue != null) { cellValue = "<div>" + cellValue + "</div>" } return cellValue; } //-----</ Columns >----- } } //----</ @Loop: Columns >----
} //------</ customizeColumns() GridColumns anpassen >-------- }
//*====/ Script for Devextreme Grid *======
|
Asp MVC View
In Devextreme kann man die Spalte anpassen mit .CustomizeColumns
Asp Core Code in der View (ASP Core MVC)
|
<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("demo_customizeColumns") //define columns format //.OnEditorPreparing("onEditorPreparing") .AllowColumnResizing(true) ) </div> |
CodeDocu_com
