jQuery Grid Detail Template not working when kendo grid is re-generated

[Jerry]

We have a .Net Core 6 application.

We are using the "jQuery Grid Detail Template" to display a customer's orders in a KendoGrid. Then when the detail template icon is clicked, we fetch the order details and show those rows in another sub kendoGrid.

We are following this example: https://demos.telerik.com/kendo-ui/grid/detailtemplate

We can get this working for our situation, but only for the first customer that is searched.

When a different customer orders are searched, and the detail icon is clicked, we get an error ("Uncaught TypeError: Cannot convert undefined or null to object").

Our UI uses the "kendo-dropdownlist" for customer names, and a "Html.Kendo().DatePicker()" for the From/To date ranges. And a "Html.Kendo().DropDownButton()" for a Search button.

This is what happens when the form is first loaded:
1: user selects customer + date range then clicks [Search]
2: the javascript function "GetMyData()" is called
3: The "$("#myOrders-grid").kendoGrid" is populated correctly
4: when any details icon is clicked, the "detailInit: detailInit" function is called, the detail data is fetched and displayed correctly in sub grid.

PROBLEM occurs here
5: user selects a different customer and clicks [Search]
6: The "$("#myOrders-grid").kendoGrid" is populated correctly
7: BUT when any details icon is clicked, this error is generated: "Uncaught TypeError: Cannot convert undefined or null to object"
    the "detailInit: detailInit" function is never triggered
8: HOWEVER: If I select the original customer and original date range from dropdown and press [Search], the details icon works again, but only for the original customer and date range.

It seems like something remembers only the original customer's data. Do I have to clear something from memory?

What am I doing wrong below?

 

//My pseudo code 
function GetMyData(e) {
	var formattedStartDate = dateFns.parse(datefrom.value, 'YYYY-MM-DD hh:mm:ss')
	var formattedEndDate = dateFns.parse(dateto.value, 'YYYY-MM-DD hh:mm:ss')
	var myUrlString = '@Url.Action("GetOrders", "MyController")'
	var payloadContent = {
		"customerId": parseInt(customerDropdown.value),
		"startDate":  formattedStartDate,
		"endDate": formattedEndDate
		}
	$("#myOrders-grid").kendoGrid({
		dataSource: {
			transport: {
				read: function(options) {
					axios.post(myUrlString, payloadContent).then(function (response) {
						options.success(response.data);
					})
				}
			},
			pageSize: 10,
			sort: { field: "eventStart", dir: "asc" },
			schema: {
				model: {
					fields: {
						eventStart: { type: "date" },
						...ETC
					}
				}
			}
		},
		detailTemplate: kendo.template($("#template-details").html()),
		detailInit: detailInit,
		height: 600,
		sortable: true,
		pageable: {
			numeric: true
		},
		columns: [
			{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
			...ETC
		],
		excel: {
			fileName: "orders-data.xlsx",
			allPages: true,
			filterable: true
		},
	})
}

function detailInit(e) {
	var detailRow = e.detailRow;
	var detailsUrlString = '@Url.Action("GetDetails", "MyController")'
	var payloadContent = {
		"customerID": e.data.custId,
		"orderID":  e.data.orderid
		}

	detailRow.find(".detailTabstrip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".details").kendoGrid({
		dataSource: {
			transport: {
					read: function(options) {
						axios.post(detailsUrlString, payloadContent).then(function (response) {
							options.success(response.data);
						})
					}
				},

			pageSize: 10,
			sort: { field: "orderID", dir: "asc" },
			schema: {
				model: {
					fields: {
						description: { type: "string" },
						...ETC
					}
				}
			},
		},
		scrollable: false,
		sortable: true,
		height: 250,
		pageable: true,
		columns: [
			{ field: "description", title:"Description" },
			...ETC
		]
	});
}

 

<script type="text/javascript" id="template-details">
        <div class="detailTabstrip">
            <ul>
                <li class="k-active">
                    Order Details
                </li>
                <li>
                    Customer Details
                </li>
            </ul>
            <div>
                <div class="details"></div>
            </div>
            <div>
                <div class='customer-details'>
                    <h3>Customer details will go here later</h3>
                </div>
            </div>
        </div>
</script>

[Jerry]

I got this working.

The problem was that I was creating the parent grid each time in the button click event. "$("#mygrid").kendoGrid({ ........."

To get the correct behavior, I created the parent grid once when the form loads. Then in the button click event, I query the database and set the datasource like below. So now the grid is created on startup and only the datasource is re-created in the button click event.

 

function onClickSearch(e) {
       //Get values from UI
        var formattedStartDate = dateFns.parse(datefrom.value, 'YYYY-MM-DD hh:mm:ss')
        var formattedEndDate = dateFns.parse(dateto.value, 'YYYY-MM-DD hh:mm:ss')

       var myUrlString = '@Url.Action("GetMyData", "MyController")'
       var payloadContent = {
            "companyId": parseInt(companyDropDown.value),
            "startDate":  formattedStartDate,
            "endDate": formattedEndDate,
            }

           axios.post(myUrlString, payloadContent).then(function (response) {
                var dataSource = new kendo.data.DataSource({ data: response.data, pageSize: 10 });  //NEED pageSize set here
                var grid = $('#my-grid').data("kendoGrid");
                dataSource.read();
                grid.setDataSource(dataSource);
           })
}