New to Telerik UI for ASP.NET MVC? 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

Also available for:

API REFERENCE

Drag a column header and drop it here to group by that column

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Contact Name","headerAttributes":{"data-field":"ContactName","data-title":"Contact\u0026#32;Name"},"media":"(min-width: 450px)","field":"ContactName","encoded":true},{"title":"Contact Title","headerAttributes":{"data-field":"ContactTitle","data-title":"Contact\u0026#32;Title"},"width":"250px","media":"(min-width: 850px)","field":"ContactTitle","encoded":true},{"title":"Company Name","headerAttributes":{"data-field":"CompanyName","data-title":"Company\u0026#32;Name"},"width":"250px","media":"(min-width: 850px)","field":"CompanyName","encoded":true},{"title":"Country","headerAttributes":{"data-field":"Country","data-title":"Country"},"media":"(min-width: 450px)","field":"Country","encoded":true},{"title":"Items","media":"(max-width: 450px)","template":"#=resColTemplate(data)#"}],"groupable":{"enabled":true},"pageable":{"refresh":true,"pageSizes":[5,10,20],"buttonCount":5},"sortable":true,"scrollable":{"height":"200px"},"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-mvc/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"},"CompanyName":{"type":"string"},"ContactName":{"type":"string"},"ContactTitle":{"type":"string"},"Address":{"type":"string"},"City":{"type":"string"},"Region":{"type":"string"},"PostalCode":{"type":"string"},"Country":{"type":"string"},"Phone":{"type":"string"},"Fax":{"type":"string"},"Bool":{"type":"boolean","defaultValue":null}}}}}});}); 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.

Responsive Columns

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo