Dynamisches Laden von Auswahl SelectBox in einem Grid

//*==== 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 } }

@{

    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>