dataSource Object|Array|kendo.data.DataSource

The data source of the widget which is used render ListBox items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array, or an existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or array, the widget initializes a new kendo.data.DataSource instance by using that value as the data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance, the widget uses that instance and does not initialize a new one.

Example - set dataSource as a JavaScript object

<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
    dataSource: {
        data: [
            { name: "Jane Doe" },
            { name: "John Doe" }
        ]
    },
    template: "<div>#:name#</div>"
});
</script>

Example - set dataSource as a JavaScript array

<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
     dataSource: [
         { name: "Jane Doe" },
         { name: "John Doe" }
    ],
    template: "<div>#:name#</div>"
});
</script>

Example - set dataSource as an existing kendo.data.DataSource instance

<select id="listBox"></select>
<script>
var dataSource = new kendo.data.DataSource({
  data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#listBox").kendoListBox({
    dataSource: dataSource,
    template: "<div>#:name#</div>"
});
</script>
In this article