<div id="grid1wrapper" class="row">
	<div class="col-md-12">
		<div id="grid1" kendo-grid="grid1" k-options="gridOptions" k-data-source="dataSource"></div>
	</div>
</div>

$scope.gridOptions = {
	height: 500,
    	editable: true,
    	resizable: true,
    	navigatable: true,
    	columns: [
    		{
    			field: 'filename',
    			title: 'File Name'
    		},
    		{
    			title: 'File',
    			field: 'file',
    			attributes: { "class": 'text-center' },
    			editor: $scope.fileUploader,
    			width: 200 
    		},
    		{ 
    			command: "destroy", 
    			title: " ", 
    			width: 40 
    		}]
    };

$scope.fileUploader = function(container, options) {
		const name = options.field; 
		$('<input type="file"  name="'+ name +'"/>')
			.appendTo(container)
			.kendoUpload({
				multiple: false,
				localization: {
		               dropFilesHere: "DropFilesHere"
		        }
			});
	};

$("th[data-title=" + column_header + "]").show();

function onExpClick(button, db_column_names, column_header) {
    
    var span = $(button).find("span");
    var grid = $("#grid").data("kendoGrid");

    if (span.hasClass("k-i-minus")) {

        span.removeClass("k-i-minus");
        span.addClass("k-i-plus");

        db_column_names.forEach(function(column_name){            
            grid.hideColumn(column_name.concat("_rec"));
            grid.hideColumn(column_name.concat ("_action"));
            grid.hideColumn(column_name.concat ( "_notes"));
        });

        $("th[data-title=" + column_header + "]").show();

    } else {

        span.removeClass("k-i-plus");
        span.addClass("k-i-minus");

        db_column_names.forEach(function(column_name){            
            grid.showColumn(column_name.concat("_rec"));
            grid.showColumn(column_name.concat ("_action"));
            grid.showColumn(column_name.concat ("_notes"));
        });


    }    
};

$(element).replaceWith("<textarea data-bind='value:filters[0].value'></textarea>");

$("#grid").kendoGrid({
    columns: [ {
        field: "flags",
        filterable: {
            ui: "testFilter"
        }
    } ],
    filterable: true,
    //...
});


function testFilter(e) {
    $(e).replaceWith(`
    <input type='checkbox' value='1' onclick='setFilterInput(this);' />
    <input type='checkbox' value='2' onclick='setFilterInput(this);' />
    <input type='checkbox' value='4' onclick='setFilterInput(this);' />
    <input type='checkbox' value='8' onclick='setFilterInput(this);' />
    <input id='filterInput' type='text' data-bind='value:filters[0].value' />
    `);
}

function setFilterInput(e) {
    var x = $(e).val();
    var c = $(e).is(":checked");
    var input = $("#filterInput");
    var val = parseInt(input.val(), 10);

    if (val === NaN) {
        val = 0;
    }

    input.val(c ? val | x : val ^ x);
    input.trigger("change");
}

function testFilter(e) {
    console.log("the current filter value is", $(e).val());
}

<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