@(Html.Kendo().Grid<MyModelName>()
            .Name("event-violations-grid")
            .Columns(columns =>
            {
                //columns.Select().Width(50);
                columns.Bound(s => s.SupplierNumber).Hidden(true);
                columns.Bound(s => s.SupplierName).Width(275);
                columns.Bound(s => s.OldOrderDate).Format("{0:MM/dd/yyyy}").Hidden(true);
                columns.Bound(s => s.OldDeliveryDate).Format("{0:MM/dd/yyyy}").Hidden(true);
                columns.Bound(s => s.NewOrderDate).Format("{0:MM/dd/yyyy}").Hidden(true);
                columns.Bound(s => s.NewDeliveryDate).Format("{0:MM/dd/yyyy}").Hidden(true);
                columns.Bound(s => s.ArrivalDate).Format("{0:MM/dd/yyyy}").Hidden(true);
                columns.Bound(s => s.TransmitTime).Hidden(true);
                columns.Bound(s => s.ExpectedDeliveryTime).Hidden(true);
                columns.Bound(s => s.Action).Width(180);
                columns.Bound(s => s.ActionComments);
            })
            .Sortable()
            .Scrollable(s => s.Height("215px"))
            .HtmlAttributes(new { style = "height:250px;" })
            .Resizable(r => r.Columns(true))
        )

function getViolations() {
    var vdata = {};
    vdata["stageId"] = _stageId;
    vdata["stores"] = "" + _stores.join(',');
    vdata["supplierNumber"] = _eventRevertData.SupplierNumber;
    vdata["origDeliveryDate"] = kendoDateOnly(_eventRevertData.Start);
    vdata["newDeliveryDate"] = null;

    var dataSource = new kendo.data.DataSource({
        schema: {
            model: {
                fields: {
                    SupplierNumber: { type: "number" },
                    SupplierName: { type: "string" },
                    OldOrderDate: { type: "date" },
                    OldDeliveryDate: { type: "date" },
                    NewOrderDate: { type: "date" },
                    NewDeliveryDate: { type: "date" },
                    ArrivalDate: { type: "date" },
                    TransmitTime: { type: "string" },
                    ExpectedDeliveryTime: { type: "string" },
                    OrderGroup1: { type: "boolean" },
                    OrderGroup2: { type: "boolean" },
                    OrderGroup3: { type: "boolean" },
                    OrderGroup4: { type: "boolean" },
                    OrderGroup5: { type: "boolean" },
                    OrderGroup6: { type: "boolean" },
                    OrderGroup7: { type: "boolean" },
                    OrderGroup8: { type: "boolean" },
                    Action: { type: "string" },
                    ActionComments: { type: "string" }
                }
            }
        },
        transport: {
            read: {
                url: "/MyController/GetViolationsGrid1",
                data: vdata,
                dataType: "json"
            }
        }
    });
    dataSource.fetch(function () {
        let data = this.data();
        console.log(data);
        var grid = $("#event-violations-grid").data("kendoGrid");
        grid.setDataSource(data);
    });
}

//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>