<div data-ng-controller="GridCtrl as gridCtrl"><script type="text/x-kendo-template" id="detail-grid-template">
        <div class="detail-tab-strip">
            <ul>
                <li class="k-active">
                    Grid One
                </li>
                <li class="k-active">
                    Grid Two
                </li>
            </ul>
            <div>
                <div class="grid-one"></div>
            </div>
            <div>
                <div class="grid-two"></div>
            </div>
        </div>
    </script><script type="text/x-kendo-template" id="grid-one-editor">
        <div>
            <ul class="fieldlist">
                <li>
                    <label for="GridOneID">ID</label>
                    <input type="text" class="k-input k-textbox full-width k-state-disabled" disabled="disabled" name="GridOneID" data-bind="value:GridOneID">
                </li>
                <li>
                    <label for="GridFieldOne">One</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldOne" data-bind="value:GridFieldOne">
                </li>
                <li>
                    <label for="GridFieldTwo">Two</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldTwo" data-bind="value:GridFieldTwo">
                </li>
                <li>
                    <label for="GridFieldThree">Three</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldThree" data-bind="value:GridFieldThree">
                </li>
                <li>
                    <label for="GridFieldFour">Four</label>
                    <select id="GridFieldFour" name="GridFieldFour" data-bind="value:GridFieldFour"></select>
                </li>
                <li>
                    <label for="GridFieldFive">Five</label>
                    <select id="GridFieldFive" name="GridFieldFive" data-bind="value:GridFieldFive"></select>
                </li>
            </ul>
        </div>
    </script></div>
 

function gridOneCreateOrEditEvent(e) {

	var detailGridWrapper = this.wrapper,
		mainGrid = $("#parentGrid").data("kendoGrid"),
		$parentGridTr = $(detailGridWrapper).closest("tr").prev(),
		parentData = mainGrid.dataItem($parentGridTr);
	
	e.model.set("GridOneID", parentData.get("GridOneID"));
	e.model.set("GridFieldFive", parentData.get("GridFieldFive"));

	if (e.model.isNew()) {
		e.container.kendoWindow("title", "Create Item");
	}
	else {
		e.container.kendoWindow("title", "Edit Item");
	}

	$("#GridFieldFive").kendoDropDownList({
		dataSource: vm.fieldFiveOptions,
		change: function (c) {

			var dropDownValue = $('#GridFieldFive').data("kendoDropDownList").value();
			e.model.set("GridFieldFive", dropDownValue);

			this.value(dropDownValue);
		}
	});

	$("#GridFieldFour").kendoDropDownList({
		dataSource: [
			{ id: "A", name: "B" },
			{ id: "B", name: "B" }
		],
		dataTextField: "name",
		dataValueField: "id",
		change: function (c) {
			var dropDownValue = $("#GridFieldFour").data("kendoDropDownList").value();
			e.model.set("GridFieldFour", dropDownValue);

			this.value(dropDownValue);
		}
	});

	if (e.model.get('GridFieldFour') === 'A')
		$('#GridFieldFour').data("kendoDropDownList").value('A');
	else {
		$('#GridFieldFour').data("kendoDropDownList").value('B');
		e.model.set("GridFieldFour", $('#GridFieldFour').data("kendoDropDownList").value());
	}

	var popupWindow = e.container.data("kendoWindow");
	popupWindow.setOptions({ width: "600px" });
	popupWindow.setOptions({ height: "700px" });
	popupWindow.center();
}

function detailInit(e) {
	var gridOneToolbar = [];
	var gridOneCommands = [];
	var detailRow = e.detailRow;

	gridOneToolbar = [
		{ name: "create", text: "Add New Entry" }
	];

	gridOneCommands = [
		{ name: "edit", text: { edit: "Edit", update: "Save" } },
		{ name: "Delete", iconClass: "k-icon k-i-close", click: showGridOneDeleteConfirmation }
	];


	detailRow.find(".detail-tab-strip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".grid-one").kendoGrid({
		dataSource: {
			transport: {
				create: createItem,
				read: readItems,
				update: updateItem,
				parameterMap: function (options, operation) {
					if (operation !== "read" && options.models) {
						return { models: kendo.stringify(options.models) };
					}
				}
			},
			batch: true,
			pageSize: 10,
			filter: [
				{ field: "GridOneID", operator: "eq", value: e.data.GridOneID },
				{ field: "GridFieldFive", operator: "eq", value: e.data.GridFieldFive }
			],
			schema: {
				data: "Data",
				total: "Data.length",
				errors: handleGridErrors,
				model: {
					id: "GridOneID",
					fields: {
						GridOneID: {
							editable: true,
							defaultValue: e.data.GridOneID
						},
						GridFieldOne: {
							editable: true
						},
						GridFieldTwo: {
							editable: true
						},
						GridFieldThree: {
							editable: true
						},
						GridFieldFour: {
							editable: true
						},
						GridFieldFive: {
							editable: true
						},
						RowStatus: {
							editable: false, validation: { required: false }
						},
						RowMessage: {
							editable: false, validation: { required: false }
						}
					}
				}
			}
		},
		scrollable: false,
		sortable: true,
		pageable: {
			refresh: true
		},
		toolbar: gridOneToolbar,
		columns: [
			{ title: "", width: "40px", template: $('#grid-row-status-template').html() },
			{ field: "GridOneID", title: "ID", width: "100px" },
			{ field: "GridFieldOne", title: "One", width: "70px" },
			{ field: "GridFieldTwo", title: "Two", width: "40px" },
			{ field: "GridFieldThree", title: "Three", width: "40px" },
			{ field: "GridFieldFour", title: "Four", width: "50px" },
			{ field: "GridFieldFive", title: "Five", width: "60px" },
			{
				command: gridOneCommands,
				title: "&nbsp;", width: "180px"
			}
		],
		edit: gridOneCreateOrEditEvent,
		editable: {
			mode: "popup",
			template: kendo.template($("#grid-one-editor").html())
		}
	});
}


	
    

        const $grid = $gridRoot.find('.xifacts-simple-grid');
        const grid = $grid.data('kendoGrid');
        grid.dataSource.filter({});
        grid.dataSource.sort({});
        grid.dataSource.pageSize(5);
        grid.clearSelection();
        grid.dataSource.page(1);

this.MultiSelectEmployeeClassesArrayToString = function (item) {
            return item.EmployeeLicensingClasses
                .map(function (employeeClass) { return employeeClass.Description; })
                .join(', ');
        },