New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core CheckBoxGroup Layout

Loading Demo...

EXAMPLE

VIEW SOURCE

Also available for:

HTML HELPER API

window.demoComponentProperties = { sections: [{ label: 'Layout Settings', controls: [ { type: 'dropdown', name: 'layout', options: [{ value: 'horizontal', label: 'Horizontal' }, { value: 'vertical', label: 'Vertical' }], defaultValue: 'horizontal' }, { type: 'dropdown', name: 'labelPosition', options: [{ value: 'before', label: 'Before' }, { value: 'after', label: 'After' }], defaultValue: 'before' } ] }], onChange: function (values) { var element = $("#checkboxgroup"); var checkBoxGroup = element.data("kendoCheckBoxGroup"); if (checkBoxGroup) { var value = checkBoxGroup.value(); checkBoxGroup.destroy(); element.empty().removeClass("k-checkbox-list k-list-vertical k-list-horizontal"); element.kendoCheckBoxGroup({ items: ["English", "German", "Italian", "Russian", "Spanish"], layout: values.layout, labelPosition: values.labelPosition, value: value }); } } }; Select language:

.label { font: normal 14px/16px Metric, Arial, Helvetica, sans-serif; color: #656565; display: inline-block; text-transform: uppercase; margin-bottom: 10px; } #radiogroup { margin-top: 10px; } .k-checkbox-label { width: 55px; }

Support & Learning Resources

Additional Resources