var tabStrip = e.detailRow.find("#leadDetailsTabstrip").kendoTabStrip({
            animation: { open: { effects: "fadeIn" } },
            activate: dcLead.onActivateTab,
        }).data("kendoTabStrip");

    $("#listView").data("kendoListView").dataSource.filter({      
      filters: [
        { field: "Document_Number", operator: "contains", value: "J82901" }
      ]
    });

<div class="h-100">
        <div id="tabstrip" class="h-100">
            <ul>
                <li class="k-active">Arbeitsschritte</li>
                <li>Mitteilungen</li>
                <li>Wiedervorl</li>
            </ul>
            <div id="tab1" class="vh-100">
                <div id="grid1"></div>
            </div>
            <div class="vh-100">
                <div id="grid2"></div>
            </div>
            <div class="vh-100">
                <div id="grid3"></div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip();

        $("#grid1").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid2").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid3").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

    })
</script>

    <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="1">
        <Tabs>
            <telerik:RadTab Text="People List" runat="server" NavidateUrl="Main.aspx" Target="_blank">
            </telerik:RadTab>
            <telerik:RadTab Text="Registry " runat="server" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab Text="Notes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Recipes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Files" runat="server">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <br />
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
        <telerik:RadPageView runat="server" ID="RadPagePeopleList"></telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageRegistry">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageNotes">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageRecipes" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageFiles" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

<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())
		}
	});
}