Man kann in dem DevExtreme Datagrid eine Spalte speziell darstellen, indem man der Spalte ein cellTemplate zuweist.
Dieses kann man auch zur Laufzeit in javascript einstelle.
DevExpress, DevExtreme DataGrid: einstellen der Darstellung einer Spalte mit cellTemplate zur Laufzeit
col.cellTemplate= function (element,info) { element.append("<div>" + info.text + "</div>") .css("color", "blue"); } |
//*==== 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.cellTemplate= function (element,info) { element.append("<div>" + info.text + "</div>") .css("color", "blue"); //return cellValue; } //-----</ Columns >----- } } //----</ @Loop: Columns >----
} //------</ customizeColumns() GridColumns anpassen >-------- } //------</ onEditorPreparing() >-------- //*====/ Script for Devextreme Grid *====== |
Die Formatierung der Spalte wird durch das Html.DevExtreme().DataGrid().customizeColumns(javascript_function) eingestellt
@{ 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("demo_customizeColumns") //define columns format //.OnEditorPreparing("onEditorPreparing") .AllowColumnResizing(true) ) </div> @*-------------</ Grid >-----------------*@
@*===========< Script >==========*@ <script> DevExpress.localization.locale("de"); </script> @*===========</ Script >==========*@
</form>
|