CodeDocu.com

 

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.

Set DevExtreme DataGrid CustomizeText

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

Set DevExtreme DataGrid CustomizeText

 

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>

 

 


Software Entwicklung Stuttgart Nürtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel