grid.cols Number|String
Defines the columns of the grid.
Example of the cols setting of the grid layout
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="listView"></div>
<div id="pager" class="k-pager"></div>
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>
<script>
$(function() {
var dataSource = new kendo.data.DataSource({
data: products,
pageSize: 21
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
layout: "grid",
grid: {
cols: 11,
gutter: 20
},
template: kendo.template($("#template").html())
});
});
</script>
<style>
.product{
width: 100px;
}
.product h3{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .9em;
}
</style>