With the
function Column.customizeText you can adjust the displayed text of a column in
DevExtreme data grid
Only the text
of the output is adjusted. You can't include HTML code or a template here.
The function
displays the cell with value and valueText when called.
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>
|