dataSource Object|Array|kendo.data.DataSource

The data source of the widget which is used to display a list of values. 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 will initialize a new kendo.data.DataSource instance using that value as data source configuration.

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

Example - set dataSource as a JavaScript object

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataTextField: "text",
  dataValueField: "value",
  dataSource: {
    data:  [
      { text: "Apples", value: "1" },
      { text: "Oranges", value: "2" }
    ]
  },
  columns: [
    { field: "text", title: "Text" },
    { field: "value", title: "Value" }
  ]
});
</script>

Example - set dataSource as a JavaScript array

<input id="multicolumncombobox" />
<script>
var data = [
  { text: "Apples", value: "1" },
  { text: "Oranges", value: "2" }
];
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: data,
  dataTextField: "text",
  dataValueField: "value",
  columns: [
      { field: "text", title: "Text" },
      { field: "value", title: "Value" }
  ]
});
</script>

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

<input id="multicolumncombobox" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  }
});
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: dataSource,
  dataTextField: "ProductName",
  dataValueField: "ProductID",
  columns: [
      { field: "ProductName" },
      { field: "ProductID" }
  ]
});
</script>
In this article
Not finding the help you need? Improve this article