StackedLayoutSettings
configurationThe stacked layout settings of the Grid.
stackedLayoutSettings
Object<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ field: "city" }
],
dataSource: [
{ name: "Jane Doe", age: 30, city: "New York" },
{ name: "John Doe", age: 33, city: "Boston" }
],
dataLayoutMode: "stacked",
stackedLayoutSettings: {
cols: 2
},
height: 550
});
</script>stackedLayoutSettings.cols
Number|ArraySets 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.
<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><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><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><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>