(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!

I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.

When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.

var _dataSource = new kendo.data.DataSource({
                    data: localityGridDataSource,
                    sort: { field: 'nodeLocalitySequence', dir: 'asc' },
                    autoSync: true,
                    schema: {
                        model: {
                            id: 'localityCode',
                            fields: {
                                localityCode: { editable: false },
                                localityTitle: { editable: false },
                                nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
                                nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
                                nodeLocalityExternalNote: { type: 'text' }
                            }
                        }
                    }
                });

                _LocalitiesGrid.kendoGrid({
                    dataSource: _dataSource,
                    editable: true,
                    noRecords: true,
                    edit: onGridEditing,
                    remove: clearLocalitiesAudioMessage,
                    columns: [
                        { field: 'localityTitle', title: app.localize('Locality') },
                        { field: 'nodeLocalitySequence', title: app.localize('Order') },
                        { field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
                        { field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
                        { command: ["destroy"], width: '125px' }
                    ]
                });

Hello experts

How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

please Answerㅠㅠ

link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan

<form id="myForm"></form>


<script>
  $("#myForm").kendoForm({
    formData: {
        ID: 1,
        FirstName: "John",
        LastName: "Doe",
        Address: "London",
        Postcode: "SW1A 1AA"
    },
    layout:"grid",
    orientation: 'horizontal',
    grid: {
        cols: 2,
        gutter: 20
    },
    items: [{
        type: "group",
        label: "Personal Information",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 2,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "LastName",
            label: "Last Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "Addresss",
            label: "Address:",
            validation: { required: true },
            colSpan: 2
        },{
            field: "Postcodee",
            label: "Postcode:",
            validation: { required: true },
            colSpan: 2
        }]
    },{ 
        type: "group",
        label: "Shipping Address",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 4,
            gutter: 10
        },
        items:[{
            field: "Address",
            label: "Address:",
            colSpan: 2,
        },{
            field: "Postcode",
            label: "Postcode:",
            colSpan: 2
        }]
    }]
  });
</script>