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

Dynamisches Laden von Auswahl SelectBox in einem Grid

30.09.2021 (๐Ÿ‘1445)


 

Folgender Code zeigt, wie man in einem DataGrid dynamisch in eine Zelle ein Auswahl als DropDownBox lรคdt.

Das Beispiel basiert auf einer DevExtreme UserControls hier in Asp.Net Core MVC sowie der Verwendung zur Laufzeit in Javascript

Javascript jQuery Asp Core MVC

Devextreme Datagrid, SelectBox MultiSelect

 

 

 

//*==== 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.showEditorAlways = false;

                col.cellTemplate= function (element,info) {

                    element.append("<div>" + info.text + "</div>")

                        .css("color", "blue");

                }

                //col.editCellTemplate ="<select multiple='multiple'><option value='1'> r1</option><option value='2'>Lunch</option></select >";

                //-----</ Columns >-----

            }

        }

        //----</ @Loop: Columns >----

 

    }

    //------</ customizeColumns() GridColumns anpassen >--------

}

function onEditorPreparing(e) {

    //------< onEditorPreparing()  >--------

    //*event on edit, called for each cell

    //e=editorelement

    var dataField = e.dataField;

    if (dataField != null) {

        if (dataField.includes("col_")) {

            //----< Setup Editor >----

            e.editorName = "dxSelectBox";

            const data = [{

                DayNr: "1", DayText: 'Mo 01.09.2021'

            },

                {

                DayNr: "2", DayText: 'Di 02.09.2021'

            }];

            e.editorOptions.dropDownOptions = { height: 500, width:200 };

            e.editorOptions.dataSource = data;

            e.editorOptions.valueExpr = "DayNr";

            e.editorOptions.displayExpr = "DayText";

            //----</ Setup Editor >----

        }

    }

}

    //------</ onEditorPreparing() >--------

//*====/ Script for Devextreme Grid *======

 

 

 

     //e.editorName = "dxDropDownBox";

     //e.editorOptions.contentTemplate = function (args, container) { //custom template } }

 

 

 

Code in Asp Core MVC View

@{

    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("customizeColumns") //define columns format

        .OnEditorPreparing("onEditorPreparing")

 

        .AllowColumnResizing(true)

    )

    </div>

    @*-------------</ Grid >-----------------*@

 

    @*===========< Script >==========*@

    <script>

        DevExpress.localization.locale("de");

    </script>

    @*===========</ Script >==========*@

 

</form>

 

 

 

DevExtreme, DataGrid