I want to know how to limit the number of checkboxes per row in the CheckBoxGroup function.

1 Answer 70 Views
Checkbox CheckBoxGroup Form Grid
Top achievements
Rank 1
Aeong asked on 18 Aug 2023, 05:24 AM | edited on 18 Aug 2023, 05:25 AM

(Before getting into the article, I apologize for my poor English skills.)

Hello! you guys always help me.

I need to create checkboxes using kendoCheckBoxGroup function in specific fields of KendoForm.

However, it should be limited to 4 per line, not listed in one line.

Expressing it pictorially is as follows:

(Note, the text that goes into the field will vary in length.)


And, the code I'm working on is below.

var items = [
        {value: "item1", label: "Item 1"},
        {value: "item2", label: "Item 2"},
        {value: "item3", label: "Item 3"},
        {value: "item14", label: "Item 14"},

    items: items,
    layout: "horizontal"

How can I modify it to make it work the way I want?

Thank you as always for your kindness!

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 22 Aug 2023, 12:47 PM

Hello Aeong,

In order to achieve the desired behavior, I would suggest adding a custom style to the CheckBoxGroup and its items:

      display: flex;
      flex-wrap: wrap; 
      flex-basis: 20%;


As you can see in the above code snippet, after displaying the CheckBoxGroup as a flex, I used the CSS flex-basis property of the items, so they could be limited to 4 items per row.

Below is a small Dojo example, which illustrates the suggested approach:

I hope that the proposed solution would be suitable for your scenario. If further questions arise, do not hesitate to write back.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Top achievements
Rank 1
commented on 23 Aug 2023, 06:12 AM

This fits me perfectly. Thank you always!
Checkbox CheckBoxGroup Form Grid
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question