Items

You can control the positioning of the GridLayout items and create a complex layout by setting the configuration options for each item:

• Row
• Column
• RowSpan
• ColumnSpan

Row

The Row configuration controls in which row the GridLayoutItem will reside. The row indexes in the component are 1-based. If you don't define rows, the items will be displayed by using the formula r = i / c, where:

• r is the number of rows;
• i is the number of items;
• c is the number of columns;

    @(Html.Kendo().GridLayout()
        .Name("gridlayout")
        .Rows(r=>{
            r.Add();
            r.Add();
            r.Add();
        })
        .Items(i=>{
            i.Add().Row(1).Content("Item 1");
            i.Add().Row(2).Content("Item 2");
            i.Add().Row(2).Content("Item 3");
            i.Add().Row(3).Content("Item 4");
            i.Add().Row(3).Content("Item 5");
            i.Add().Row(3).Content("Item 6");
        })
    )

The above configuration of the GridLayout will produce the following rendering:

Column

The Column configuration controls in which column the GridLayoutItem will reside. The column indexes in the component are 1-based. If don't define any columns, the GridLayout items will be displayed in one column.

    @(Html.Kendo().GridLayout()
        .Name("gridlayout")
        .Columns(c=>{
            c.Add();
            c.Add();
            c.Add();
        })
        .Items(i=>{
            i.Add().Column(1).Content("Item 1");
            i.Add().Column(1).Content("Item 2");
            i.Add().Column(2).Content("Item 3");
            i.Add().Column(3).Content("Item 4");
            i.Add().Column(3).Content("Item 5");
            i.Add().Column(3).Content("Item 6");
        })
    )

The above configuration of the GridLayout will produce the following rendering:

RowSpan

The RowSpan configuration defines how many rows the item will occupy.

    @(Html.Kendo().GridLayout()
        .Name("gridlayout")
        .Rows(r=>{
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
        })
        .Columns(c =>
        {
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
        })
        .Items(i=>{
            i.Add().Row(1).Column(1).RowSpan(4).Content("Item 1");
            i.Add().Row(2).Column(1).Content("Item 2");
            i.Add().Row(2).Column(2).Content("Item 3");
            i.Add().Row(4).Column(4).Content("Item 4");
        })
    )

ColumnSpan

The ColumnSpan configuration defines how many columns the item will occupy.

    @(Html.Kendo().GridLayout()
        .Name("gridlayout")
        .Rows(r=>{
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
        })
        .Columns(c =>
        {
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
        })
        .Items(i=>{
            i.Add().Row(1).Column(1).ColumnSpan(4).Content("Header");
            i.Add().Row(2).Column(1).Content("Item 1");
            i.Add().Row(3).Column(2).Content("Item 2");
            i.Add().Row(4).Column(4).Content("Item 3");
        })
    )

Complex Layouts

To create a complex layout, you can combine all listed configuration options—Row, Column, RowSpan, ColumnSpan.

    @(Html.Kendo().GridLayout()
        .HtmlAttributes(new { @class = "grid-layout" })
        .Name("spans")
        .Rows(r=>{
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
            r.Add().Height("50px");
        })
        .Columns(c =>
        {
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
            c.Add().Width("50px");
        })
        .Items(i=>{
            i.Add().Row(1).Column(1).ColumnSpan(4).Content("Item 1");
            i.Add().Row(2).Column(1).RowSpan(3).Content("Item 2");
            i.Add().Row(2).Column(2).RowSpan(2).ColumnSpan(2).Content("Item 3");
            i.Add().Row(4).Column(4).Content("Item 4");
        })
    )

    <style>
        .k-grid-layout > div {
            border-color: gray;
            border-width: 1px;
            border-style: dashed;
        }
    </style>

The above example will produce the following rendering:

The ASP.NET MVC GridLayout is based on the CSS Grid Layout. You can therefore use media queries to create responsive layouts for different sized screens.

See Also

• Overview of the GridLayout (Demo)
• Adaptive Rendering of the GridLayout (Demo)