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

Responsive Columns

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        responsive_columns.cshtml
                    
                        Responsive_ColumnsController.cs
                    
                        Customer.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"groupable":{"enabled":true},"sortable":true,"columns":[{"title":"Contact Name","media":"(min-width: 450px)","field":"ContactName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Contact Title","width":"250px","media":"(min-width: 850px)","field":"ContactTitle","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Company Name","width":"250px","media":"(min-width: 850px)","field":"CompanyName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Country","media":"(min-width: 450px)","field":"Country","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Items","media":"(max-width: 450px)","template":"#=resColTemplate(data)#"}],"pageable":{"refresh":true,"pageSizes":[5,10,20],"buttonCount":5},"scrollable":{"height":"400px"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/grid/responsive_columns_customers_read"},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"CustomerID":{"type":"string"},"Address":{"type":"string"},"Bool":{"type":"boolean"},"City":{"type":"string"},"CompanyName":{"type":"string"},"ContactName":{"type":"string"},"ContactTitle":{"type":"string"},"Country":{"type":"string"},"Fax":{"type":"string"},"Phone":{"type":"string"},"PostalCode":{"type":"string"},"Region":{"type":"string"},"CustomerCustomerDemo":{"type":"object"},"Orders":{"type":"object"}}}}}});}); Contact Name #=data.ContactName# Contact Title #=data.ContactTitle# Company Name #=data.CompanyName# Country #=data.Country# .col-template-val { margin: 0 0 1em .5em; }

Description

To control the visibility of the columns, use their media property. The property accepts valid strings for the matchMedia browser API and toggles the visibility of the columns based on the media queries.

More about the Telerik Grid for ASP.NET Core

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip