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

[Aeong]

(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"},
    ];

$('#checkBoxField').kendoCheckBoxGroup({
    items: items,
    layout: "horizontal"
});

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

Thank you as always for your kindness!

[Zornitsa]

Hello Aeong,

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

<style>
    #checkboxgroup{
      display: flex;
      flex-wrap: wrap; 
    }
    
    .k-checkbox-item{
      flex-basis: 20%;
    }
</style>

 

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:

• https://dojo.telerik.com/uXehUdOh 

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

Regards,
Zornitsa
Progress Telerik

[Aeong]

This fits me perfectly. Thank you always!