Using a grid layout for k-form

[Joe]

Is there a built-in Kendo form class for a grid-type layout? I know that the GridLayout component is available, was hoping that there was something built-in already that would be more straightforward to implement.

Thanks

[Martin Bechev]

Hi Joe,

I am not sure that understand the questions correctly, but will provide some general information about the GridLayout and possible alternatives.

Currently, Kendo UI for Angular does not offer a built-in form class specifically designed for a grid-type layout.

• GridLayout Component: This is the most flexible option available for creating a grid-type layout within Kendo UI for Angular. It allows you to arrange form fields in a grid structure, offering control over rows, columns, and gaps between items. This approach allows for customization and adaptability.

• Alternative Options: While there isn't a simpler built-in form class for grid layouts, you can use CSS Grid or Flexbox in conjunction with Kendo UI components to achieve a similar layout. This requires custom styling but can be more intuitive if you're familiar with CSS.

If you have specific constraints or requirements that make using the GridLayout component less desirable, please share them. This information could help in providing more tailored assistance or exploring alternative approaches.

Regards,

Martin Bechev
Progress Telerik

[Joe]

I was able to accomplish what I was wanting to using css and flex. I was mainly asking because in the documentation for Forms on the design site it shows a grid layout but there was no supporting documentation about how it was achieved.

GridLayout works well as a component but for my use case adding all the additional html elements made the code feel very bloated.

Thank you for the reply.

[Martin Bechev]

Hi Joe, 

Thank you for providing additional details. 

More information about forms can be found in the Forms Guideline article:

https://www.telerik.com/kendo-angular-ui/components/forms/forms-guideline

Also in our Design System Kit documentation you can found more details about the support CSS utility classes:

https://www.telerik.com/design-system/docs/utils/get-started/introduction/

In case of any other questions please do not hesitate to write back.