<script id="user-template" type="text/x-kendo-template">
<div id="column">
      <input id="datePicker1" />
</div>
</script>

function generateTemplate(configs) :string{

    var arryDisplayNames = configs.map(function (a) { return a.displayName; });
    var result = arryDisplayNames.join(", ");

    return result;
}

let configurationDataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url: '/api/config',
            data: function (opt) {

                return {
                    roomId: 0
                }

            }
        },
        

    },
    schema: {
        model: {
            id: "id",
            fields: {
                //id: { type: "number" },
                displayName: { type: "string"}
            }
        }
    }
})
let gridDataSource: kendo.data.DataSource = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: {
                url: '/api/rooms/',
                type: 'get',
                dataType: 'json',
                data: {
                    buildingid: roomBuildingId
                }
            },
            update: {
                url: '/api/rooms/',
                type: 'post',
                dataType: 'json'

            }
        },
        schema: {
            model: {
                id: "RoomId",
                fields: {
                    roomId: { type: 'number' },
                    buildingId: { type: 'number' },
                    displayName: { type: 'string' },
                    restricted: { type: 'boolean' },
                    isActive: { type: 'boolean' },
                    configurations: { type: 'object' },
                    owners: { type: 'object' },
                }
            }
        }
    });

    let gridColumns: kendo.ui.GridColumn[] = [

        { field: "displayName", title: "Room" },
        {
            field: "configurations",
            title: "Configurations",
            editor: function (container,options) {
                
                var input = $("<input name='Configurations' id='Configurations' >");

                // append to the editor container
                input.appendTo(container);

                // initialize a multiselect
                input.kendoMultiSelect({
                    dataTextField: "displayName",
                    dataValueField: "id",
                    dataSource: configurationDataSource // bind it to the brands array
                }).appendTo(container);
                
            },
            template: "#= generateTemplate(configurations) #"
        },
        { command: ["edit"], title: "&nbsp;"}
    ];


    roomGrid = $('#rooms').kendoGrid({
        dataSource: gridDataSource,
        sortable: true,
        groupable: true,
        pageable: false,
        editable: "inline",
        selectable: "row",
        columns: gridColumns

    }).data('kendoGrid') as kendo.ui.Grid

public async Task<IActionResult> OnGetGridDataAsync(string startDate, string endDate)
        {
             //Populating Dynamic List
            var dataList = new List<System.Dynamic.ExpandoObject>();
     
            var apiData = API call for data

            foreach (var data in apiData)
            {
                dynamic newObject = new ExpandoObject();
                newObject.Student = data.StudentName; //Student Column

                var attendanceDays = API call for data
                foreach (var attendanceDay in attendanceDays)
                {
                    if (attendanceDay.Date >= DateTime.Parse(startDate) && attendanceDay.Date <= DateTime.Parse(endDate))
                    {
                        var attendanceSessionAttend = API call for data

                        var attendanceSession = API call for data
                        var SessionName = attendanceSession.Name + " (" + attendanceDay.Date.ToString("dd MMM") + ")";

                        AttendanceStatusDto attendanceStatus = null;
                        if (attendanceSessionAttend[0].AttendanceStatusId != null)
                        {
                            attendanceStatus = API call for data
                            AddProperty(newObject, SessionName, attendanceStatus.Code);
                        }
                        else
                        {
                            AddProperty(newObject, SessionName, "");
                        }

                    }
                }

                dataList.Add(newObject);
            }

            return new JsonResult(dataList);
        }

        private static void AddProperty(dynamic attendanceObject, string columnName, string columnValue)
        {
            var attendanceObjectDict = attendanceObject as IDictionary<string, object>;
            if(attendanceObjectDict.ContainsKey(columnName))
            {
                attendanceObjectDict[columnName] = columnValue;
            }
            else
            {
                columnName = columnName.Replace(" ",String.Empty);
                attendanceObjectDict.Add(columnName, columnValue);
            }
        }

function populateGrid() {
        $.ajax({
            type: "GET",
            url: '?handler=GridDate',
            data: {
                'startDate': firstday.toDateString(),
                'endDate': lastday.toDateString()
            },
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                // notify the data source that the request succeeded
                console.log(result);
                generateGrid(result);
            },
            error: function (result) {
                // notify the data source that the request failed
                options.error(result);
            }
        });
    }

function generateGrid(response) {
               
        var gridOptions = {
            dataSource: response
        };

        $("#AttendanceTable").kendoGrid(gridOptions);

       var grid = $("#AttendanceTable").data("kendoGrid");
    };

Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' ##:data.Student==null?'':data.Student#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' ##:data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.Student==null?'':data.Student)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb))+'</td></tr>';}return $kendoOutput;'