Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register

DevExtreme DataGrid CustomizeText einstellen

30.09.2021 (👁11042)


 

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.

Ein Bild, das Text enthält. Automatisch generierte Beschreibung

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

Ein Bild, das Text, Screenshot, drinnen enthält. Automatisch generierte Beschreibung

 

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>