DevExtreme DataGrid CustomizeText einstellen
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>
|