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

$("#employees").kendoMultiSelect({
                placeholder: "Select employees...",
                dataTextField: "EmployeeFullName",
                dataValueField: "EmployeeId",
                autoBind: false,
                filter: "contains",
                dataSource: { 
                    serverFiltering: true,
                    transport: { 
                        read: baseUrl + "Schedules/GetEmployees_New",
                    }
                }
            }).data('kendoMultiSelect');
             
           $("#positions").kendoMultiSelect({
                placeholder: "Select positions...",
                dataTextField: "Code",
                dataValueField: "PositionId",
                autoBind: false,
                filter: "contains",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: baseUrl + "Schedules/GetPositions_New",
                        data: function () {
                           return {
                                IDs : $("#employees").data('kendoMultiSelect').value().join() //I am not getting this value in controller
                            };
                        }
                    }
                }
            }).data('kendoMultiSelect');

        public ActionResult GetEmployees_New(Filters filter, string IDs)
        {
            return Json(ReturnData, JsonRequestBehavior.AllowGet);
        }
        public ActionResult GetPositions_New(Filters filter, string IDs)
        {
            // I am not getting employee value in IDs parameter.
            return Json(ReturnData, JsonRequestBehavior.AllowGet);
        }

    public class Filters
    {
        public string logic { get; set; }
        public DateTime? FromDate { get; set; }
        public DateTime? ToDate { get; set; }
        public List<Filter> filters { get; set; }

        public bool IsDailyHours { get; set; }
    }

<div id="scheduleToolContainer" class="wrapper">
    <div class="notificationPrompt"></div>

    <div id="scheduleToolContent">

        <button id="btnPrevDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-left"></i></button>
        <input id="scheduleDatePicker" title="datepicker" />
        <button id="btnNextDate" type="button" class="btn btn-light border"><i class="fas fa-arrow-right"></i></button>

        <select id="ddAttendingProvider" style="width:250px" data-target-url="@Url.Action("GetAttendingProviders", "ScheduleTool", new { area = "PatientLists" })" />
        <select id="ddInsurance" style="width:250px" data-target-url="@Url.Action("GetInsuranceList", "ScheduleTool", new { area = "PatientLists" })" />

        <button id="btnViewSchedule" class="btn btn-primary">Apply</button>

        <div id="scheduleGrid" class="mt-2 rounded" data-schedule-url="@Url.Action("GetScheduleItems", "ScheduleTool",  new { area = "PatientLists" })"></div>

    </div>

    <button id="btnPrintEncounters" class="btn btn-light border mt-2" data-target-url="@Url.Action("PrintSelectedEncounters", "ScheduleTool", new { area = "PatientLists" })"><i class="fas fa-file-medical-alt fa-2x"></i></button>

    <div id="gridLoadingSpinner" class="text-center text-secondary"><i class="fas fa-spinner fa-spin fa-3x"></i></div>

</div>

function loadFilters() {
    $("#ddAttendingProvider").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    url: attProvidersUrl,
                    type: "POST",
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });

    $("#ddInsurance").kendoMultiSelect({
        placeholder: 'All',
        dataSource: {
            transport: {
                read: {
                    type: "POST",
                    url: insuranceListUrl,                 
                    data: function () {
                        return {
                            filter: Filters.toRequestFilter(),
                            date: $('#scheduleDatePicker').val()
                        }
                    }
                }
            }
        }
    });
}