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

1 Answer 102 Views
Checkbox CheckBoxGroup Form Grid
Aeong
Top achievements
Rank 1
Iron
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"},
    ];

$('#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!

1 Answer, 1 is accepted

Sort by
0
Accepted
Zornitsa
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:

<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:

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

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
Aeong
Top achievements
Rank 1
Iron
commented on 23 Aug 2023, 06:12 AM

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