stackedLayoutSettings.colsNumber|Array
Sets the amount of columns in which the stacked cells will be displayed.
If set as array, the size of the array represents the number of columns, and the values represent the column widths. Possible values are: string, number, and object.
Example - cols set as number
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataLayoutMode: "stacked",
stackedLayoutSettings: {
cols: 2
},
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id"
}
}
},
selectable: {
mode: "cell",
cellAggregates: true
},
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
});
</script>Example - cols set as array of strings
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataLayoutMode: "stacked",
stackedLayoutSettings: {
cols: ["1fr", "20px"]
},
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id"
}
}
},
selectable: {
mode: "cell",
cellAggregates: true
},
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
});
</script>Example - cols set as array of numbers
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataLayoutMode: "stacked",
stackedLayoutSettings: {
cols: [100, 400]
},
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id"
}
}
},
selectable: {
mode: "cell",
cellAggregates: true
},
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
});
</script>Example - cols set as array of objects
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataLayoutMode: "stacked",
stackedLayoutSettings: {
cols: [
{ width: 700 },
{ width: 300 }
]
},
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id"
}
}
},
selectable: {
mode: "cell",
cellAggregates: true
},
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
});
</script>In this article