Integration
You can integrate the TelerikMediaQuery component with our existing components. This article provides examples on the most common scenarios:
Grid Integration
You can hide or more columns in the Grid based on the dimensions of the browser window by using the TelerikMediaQuery component and the Visible parameter of the Grid column.
You can use similar approach for the Telerik TreeList in order to hide some of the component columns on small devices. You can even replace the entire components with other components that have a simpler layout and limited functionality, such as a ListView, for small devices.
If you are saving the Grid state, you need to remove column visibility information in
OnStateChanged. Otherwise the saved column visibility may conflict with the visibility determined by the MediaQuery component.
Chart Integration
You can resize the Chart based on the browser size and re-render with the new dimensions. The OnChange event of the media query component lets you call the Refresh() method of the chart easily when your layout also changes so the chart needs new dimensions.
You can also see the Responsive Chart demo application for additional examples.
Form Integration
You can use the MediaQuery component to set various layout-related parameters of the Form component, such as Orientation, Columns, ColumnSpacing, and ButtonsLayout.
Responsive Form with MediaQuery