Looking for a small example of 'Responsive Design'

[Boris]

I know absolutely nothing about responsive design.  

I was wondering if someone could point me to some small example of this.  

What I'd like is to set up (hopefully quickly) two extremely simple pages in my web app to be compatible with multiple devices.  

One page contains a RadGrid with only a few columns and a template popup with a few controls including a RadEditor.

The other page contains two RadComboBoxes, a RadEditor, and two buttons.

[Jeff Fritz]

A very simple example of responsive design is right in the box with Visual Studio 2012.  Start a new WebForms application or start a new MVC4 application with the "Internet Application" template. 

In both of these default templates issued by Microsoft, there is a responsive design used.  Try shrinking and enlarging the browser window to see the effect it has on the layout of the pages.

[SUNIL]

Hello Jeff,

I had seen an excellent sample by you on the web where RadGrid was combined with KendoUI CSS to create a responsive and adaptive RadGrid on mobile devices. 

I cannot find that sample anymore. Would you have the URL for this sample?

Thanks

Sunil

 

 

[Marin Bratanov]

Hello Sunil,

I doubt such a sample of Jeff's will be easy to find, but RadGrid has its own built-in mobile version now that adapts to small devices and is optimized for touch screens:

• demo: http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/mobile-and-touch-support/adaptive-behavior/defaultcs.aspx (you can scan the QR code with the mobile device or click it on a desktop).
• documentation about this feature starts here: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview.

Regards,

Marin Bratanov
Telerik

[SUNIL]

Hello Marin,

I am familiar with current mobile rendering of RadGrid. But if he is not available or the sample cannot be found then it's fine.

The sample I was after was unique in that it imitated a a jquery listview on mobile devices as in following demo sample: http://demos.telerik.com/kendo-ui/m/index#mobile-listview/index.  He had used CSS from Kendo UI with a certain template in RadGrid to render the RadGrid like a jquery listview on mobile devices.

 

Thanks

Sunil