layout String (default: '')

Specify the layout of listview content. Valid options are:

  • flex: This is equivalent to display: flex. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
  • grid: This is equivalent to display: grid. It defines the element as a grid container and establishes a new grid formatting context for its contents.

Note: Flex and grid layout are supported only on modern browsers. Even so, not all browsers that support flex and grid layout, support all features.

Example of ListView with flex layout

Open In Dojo
<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: 9
    });

    $("#pager").kendoPager({
      dataSource: dataSource
    });

    $("#listView").kendoListView({
      dataSource: dataSource,
      layout: "flex",
      template: kendo.template($("#template").html())
    });
  });
</script>
<style>
  .product{
    width: 100px;
  }
  .product h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
  }
</style>
In this article