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 Spalte mit cellTemplate darstellen zur Laufzeit

30.09.2021 (👁9729)


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>