Pat Huesers
Top achievements
Rank 1
Rank 1
Pat Huesers
asked on 26 Jun 2024, 05:59 PM
I would like to know if it's possible to declare a Kendo grid column to display a Kendo grid within it. If so, how can I do this?
This is my code with my attempt (I couldn't find any demo online describing how to do this) that obviously didn't work as expected:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PSWSv3.aspx.cs" Inherits="PAMsKendo.PSWSv3" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>
<link href="styles/default-main.css" rel="stylesheet" />
<script src="scripts/jquery-3.7.1.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="scripts/kendo-ui-license.js"></script>
</head>
<body>
<div id="ordersGrid">
<div id="fooGrid"></div>
</div>
<script>
$(function () {
var myData = [
{
"bulkProjectLineItemID": 1234567,
"retailPrice": 123.45,
"wholesalePrice": 99.99,
"cost": 75.32,
"oENumbers": [
{
"oeNumber": "123456789",
"bulkProjectOEMNumberID": 123456
},
{
"oeNumber": "23456789",
"bulkProjectOEMNumberID": 123457
}
],
"interchangeNumbers": [
{
"interchangeNumber": "120-12345R",
"bulkProjectInterchangeNumberID": 123456
},
{
"interchangeNumber": "120-12345L",
"bulkProjectInterchangeNumberID": 123457
}
]
},
{
"bulkProjectLineItemID": 1234568,
"retailPrice": 123.45,
"wholesalePrice": 99.99,
"cost": 75.32,
"oENumbers": [
{
"oeNumber": "123456789",
"bulkProjectOEMNumberID": 123456
},
{
"oeNumber": "23456789",
"bulkProjectOEMNumberID": 123457
}
],
"interchangeNumbers": [
{
"interchangeNumber": "120-12345R",
"bulkProjectInterchangeNumberID": 123456
},
{
"interchangeNumber": "120-12345L",
"bulkProjectInterchangeNumberID": 123457
}
]
}
];
var gridDataSource = new kendo.data.DataSource({
data: myData,
schema: {
model: {
fields: {
bulkProjectItems: {
fields: {
bulkProjectLineItemID: { type: "number" },
retailPrice: { type: "number" },
wholesalePrice: { type: "number" },
cost: { type: "number" },
oENumbers: {
fields: {
oeNumber: { type: "string" },
bulkProjectOEMNumberID: { type: "number" }
}
},
interchangeNumbers: {
fields: {
interchangeNumber: { type: "string" },
bulkProjectInterchangeNumberID: { type: "number" }
}
}
}
}
}
}
},
pageSize: 10
});
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource,
height: 400,
width: 1200,
pageable: true,
columns:
[
{
field: "bulkProjectLineItemID",
title: "Line Item ID",
width: 120
},
{
field: "retailPrice",
title: "Retail Price",
width: 120
},
{
field: "wholesalePrice",
title: "Wholesale Price",
width: 120
},
{
field: "cost",
title: "Cost",
width: 120
},
{
title: "OE NUMBERS",
width: 200,
field: "oENumbers",
template: $().kendoGrid({
columns:
[
{
field: "oeNumber",
width: 150
},
{
field: "bulkProjectOEMNumberID",
width: 150
}
]
})
},
{
title: "INTERCHANGE NUMBERS",
width: 200,
field: "interchangeNumbers",
template: $().kendoGrid({
columns:
[
{
field: "interchangeNumber",
width: 150
},
{
field: "bulkProjectInterchangeNumberID",
width: 150
}
]
})
}
]
});
});
</script>
</body>
</html>
Thanks,
Pat
1 Answer, 1 is accepted
0
Hello Pat,
To render a Grid inside another Grid column you need to render a div element in the template of the column and later in the dataBound event handler of the Grid initialize the nested Grids. For example:
columns: [{
field: "CustomerRating",
title: "Rating",
template: "<div id='rating_#=ProductID#' class='rating'/>",
editable: returnFalse,
width: 200
}],
dataBound: function() {
var grid = this;
grid.table.find("tr").each(function () {
var dataItem = grid.dataItem(this);
$(this).find(".rating").kendoGrid({
columns:
[
{
field: "oeNumber",
width: 50
},
{
field: "bulkProjectOEMNumberID",
width: 40
}
],
dataSource: {
data: [{ oeNumber: 12, bulkProjectOEMNumberID: 11}]
}
});
kendo.bind($(this), dataItem);
});
}
Dojo demo: https://dojo.telerik.com/INuLoDoH
Regards,
Nikolay
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!