Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

You can display a column specifically in the DevExtreme Datagrid by assigning a cellTemplate to the column.

This can also be set in javascript at runtime.

DevExpress, DevExtreme DataGrid: setting the appearance of a column with cellTemplate at run time

 

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>

 

 

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de