is there any way to create a checkbox list through javascript using kendo

Question

I would like to know whether is there a way to program populate my kendo checkbox list like the image below through javascript object/array because most of the online search result are creating a list at html.

sample of output

Answer 1

If you already have the checkbox list rendered, then use MVVM checked binding:

http://demos.telerik.com/kendo-ui/mvvm/elements

http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked

If you want to render the checkbox list with JavaScript, according to some data, and check the checkboxes at the same time, then use Kendo UI templates and kendo.render()

http://docs.telerik.com/kendo-ui/framework/templates/overview

http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-render

<ul id="checkboxList"></ul>

<script>

var template = kendo.template("<li>" +
    "<label>" +
        "<input type='checkbox' #: isChecked ? \" checked='checked'\" : \"\"  # />" +
        "#: name #" +
    "</label>" +
"</li>");

var data = [
  { id: 1, name: "foo", isChecked: true },
  { id: 2, name: "bar", isChecked: false }
];

var html = kendo.render(template, data);
$("#checkboxList").html(html);

</script>

Instead of kendo.render(), you can alternatively use a Kendo UI ListView and an item template. The template definition itself can be the same.

http://demos.telerik.com/kendo-ui/listview/index

http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#configuration-template