New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Responsive Columns

The Telerik UI for ASP.NET MVC Grid provides the built-in functionality to conditionally make a column visible based on the width of the viewport.

For a runnable example, refer to the demo on Responsive Columns for the Grid component.

  • The Hidden() configuration method takes precedence over the Media() configuration.
  • The Media() configuration method cannot be used with the MinScreenWidth() option simultaneously.

Configuration

Set the Media() configuration method of the column to a valid string. When set, the column will predominantly remain visible if the specified condition is satisfied.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ContactName).Media("(min-width: 450px)");
                columns.Bound(c => c.ContactTitle).Width(250).Media("(min-width: 850px)");
                columns.Bound(c => c.CompanyName).Width(250).Media("(min-width: 850px)");
                columns.Bound(c => c.Country).Media("(min-width: 450px)");
            })
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Responsive_Columns_Customers_Read", "Grid"))
                .PageSize(20)
            )
    )

Accepted Values

  1. The property accepts valid strings for the matchMedia browser API (assuming the property is supported by the browser) and toggles the visibility of the columns based on the media queries.

  2. The property accepts the device identifiers that are available in Bootstrap 5:

  • xs is equivalent to "(max-width: 576px)"
  • sm is equivalent to "(min-width: 576px)"
  • md is equivalent to "(min-width: 768px)"
  • lg is equivalent to "(min-width: 992px)"
  • xl is equivalent to "(min-width: 1200px)"

Column Template

The Responsive Column functionality works in strong symbiosis with the Column Template functionality. The column template is used for melding all columns into an autonomous container by using the Kendo UI Template conventions.

The content within the column Template() method will be displayed when the condition specified in the Media() is met (for example, the viewport is not wider than 450px). This functionality is useful, as it allows you to alter the existing column structure based on the current viewport dimensions.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Media("(min-width: 450px)");
            columns.Bound(c => c.ContactTitle).Width(250).Media("(min-width: 850px)");
            columns.Bound(c => c.CompanyName).Width(250).Media("(min-width: 850px)");
            columns.Bound(c => c.Country).Media("(min-width: 450px)");
            columns.Template("#=resColTemplate(data)#").Title("Items").Media("(max-width: 450px)");
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Responsive_Columns_Customers_Read", "Grid"))
            .PageSize(20)
        )
)
    <script>
        var resColTemplate;

        $(document).ready( function () {
            // Extract the template content from script tag with id "responsive-column-template" and compile a template.
            resColTemplate = kendo.template($("#responsive-column-template").html()); 
        });
    </script>
    <script id="responsive-column-template" type="text/x-kendo-template">
        <strong>Contact Name</strong>
        <p class="col-template-val">#=data.ContactName#</p>

        <strong>Contact Title</strong>
        <p class="col-template-val">#=data.ContactTitle#</p>

        <strong>Company Name</strong>
        <p class="col-template-val">#=data.CompanyName#</p>

        <strong>Country</strong>
        <p class="col-template-val">#=data.Country#</p>
    </script>

See Also

In this article