Issue with kendo grids embedded in parent grid detail tab strip

0 Answers 231 Views
Grid TabStrip
Chris
Top achievements
Rank 1
Chris asked on 09 Feb 2023, 12:46 PM | edited on 09 Feb 2023, 12:47 PM

I have a parent kendo grid which has a detail kendo grid with a custom template. The custom detail template includes a tab strip with two tabs. Each tab includes a single kendo grid. I am using the default create and edit kendo grid buttons with some custom text. The controls on the parent grid seem to be working normally. When I press "Add New Row" a kendo editor pops up (pop up editing enabled) and in the background I can see that a new row is created. However, on two detail grids which are contained within each of the two tabs it seems that the pop up create and edit functionality is not working correctly. A window is popped up and the editing/creating actually works, but the grid acts strangely - mainly when I press the cancel button to exit out of an "edit" event for a particular item in one of the detail grid rows. 

I believe that I have included the appropriate amount of code to look into the issue. 

Thanks for the help! 

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


 

 

Chris
Top achievements
Rank 1
commented on 09 Feb 2023, 07:19 PM

Solved - it turns out my child grids did not have a unique identifier so this was causing the edit functionality to not work correctly against a single row. 
Nikolay
Telerik team
commented on 14 Feb 2023, 07:22 AM

Hi Chris,

Thank you for updating us on the matter. Indeed, child Grids have to be uniquely identified. 

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
Grid TabStrip
Asked by
Chris
Top achievements
Rank 1
Share this question
or