Responsive Layout Container

[Anthony]

For the past few months, I have been experimenting with React and Material UI and put one very simple application into production.

I am working on my second app which will be an online membership application.  It will need masked inputs for things such as dates, SSN# and credit cards.   This is where Mui started to fall short.   My company already licenses the DevCraft bundle for a WPF project so I started digging into Kendo.  It has all the controls I need and others I didn't even thinks of using.

My initial question isn't about the controls, but to point me in a direction for best practices responsive layout containers.  Mui has Grid (not to be confused with a Data Grid), boxes and Container which helps with that.

It's not clear to me how you do this with Kendo.   Do you have any articles to share.  

 

Thanks

Anthony

[Stefan]

Hello, Anthony,

KendoReact has a different layout component that can be helpful in this case:

https://www.telerik.com/kendo-react-ui-develop/components/layout/

One of them is our new TileLayout component, which allows dynamic positioning, reordering, and resizing of different containers:

https://www.telerik.com/kendo-react-ui-develop/components/layout/tilelayout/get-started/

The Splitter is also a component that can be useful in this case:

https://www.telerik.com/kendo-react-ui-develop/components/layout/splitter/

In general, for pure layout containers, the developer can be anything that they like, including Material UI with our components inside or pure Bootstrap.

Please let me know if I can provide additional information on this matter.

Regards,
Stefan
Progress Telerik

[Anthony]

Thank you.  This is helpful.

By pure Bootstrap, do you mean using the grid system detailed on its website?
https://getbootstrap.com/docs/5.0/layout/grid/

Does this approach work with all Kendo themes without importing any additional packages?

[Vladimir Iliev]

Hello Anthony,

Yes, no additional files are needed and you can directly use this approach. Please note however that our bootstrap theme is designed to blend with bootstrap components/elements and I would suggest to use it if you plan to use more than their grid system.

Also as our themes internally also have grid system, we plan to expose it for clients in future versions, however currently I can't be more specific on the exact time frame when this will happen.

Regards,
Vladimir Iliev
Progress Telerik