[Solved] Need columns.maxScreenWidth too!

[Ed]

These new responsive grid enhancements are nice, but they are not complete. As a result we have our own home-grown responsive solution. For the Responsive Grid, please add a "columns.maxScreenWidth" option as well. For bootstrap xs, we only show a "Mobile Column", which is a template, showing several columns, with their title in bold and value, each in a div in the template. For bootstrap sm and above, we hide the "Mobile Column". We also show increasing numbers of columns, like what is possible with using minScreenWidth option.  With only minScreenWidth, you are assuming all columns will be visible at the widest screen size.  That doesn't cover all the use cases, especially when we are discussing mobile usability.

Thanks,
--Ed

[Dimo]

Hello Ed,

Thanks for your sharing your point of view. You can vote for the described feature in our feedback portal - http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback

My personal objection against the discussed approach is that the data is rendered duplicated, and the Grid is compiling and rendering more templates than it should. I am not sure that duplicate content follows the best practices of responsive web design, which normally implies using appropriate CSS to achieve the best look of certain content for certain media.

Instead of using a mobile-only column, which aggregates multiple data field values, and having all other columns hidden on mobile devices with small screens, I would initialize a Grid widget with different settings (e.g. a row template, or a single column with a template). This is not a "responsive" implementation either, but will be a better in terms of performance.

Regards,
Dimo
Telerik

[Ed]

Hi Dimo,

When weighing usability and data duplication, I would think usability would come first. It certainly does to our business team, which is why they went this route - even after I noted the data duplication issue.  Also, when working with a paged grid, the amount of data duplication is relatively small.

Regarding your recommendation of a row template or single column template, are you recommending the row/single column template for all responsive sizes, not just for mobile?  Perhaps I'm not understanding. Could you provide an example of what you are proposing?

Thanks,

--Ed

[Dimo]

Hi Ed,

My suggestion was to initialize the Grid inside a conditional statement block and define only one column with a column template on mobile devices. The reasoning behind this approach is that browser windows on mobile devices cannot be resized anyway, so you will never need all those hidden columns.

Regards,
Dimo
Telerik