Introduction

In my last article, I have explained how to perform remote data binding for a Kendo multi-column combo box. In this blog, I’m extending it and will explain how to do the same remote data binding to a Kendo multi-column combo box.

HTML

  1. <div id="example">
  2. <div class="demo-section k-content">
  3. <h4>Customers</h4>
  4. <!--<input id="customers" style="width: 50%;" />-->
  6. <input data-role="multicolumncombobox"
  7. data-placeholder="Type Customer Name"
  8. data-text-field="customerName"
  9. data-value-field="customerID"
  10. data-columns="[
  11. {field: 'customerID', title: 'ID'},
  12. {field: 'customerName', title: 'Name'}
  14. ]"
  15. data-bind="value: selectedCustomer,
  16. source: customer"
  17. style="width: 100%" />
  18. </div>

data-role – > It should be a widget role which is multocolumncombobox.

data-text-field -> The text field which should be bound to the text field of our datasource, in my case it is customerName.

data-value-field -> The value field, which should be bound to the value field of our datasource, in my case it is customerID.

data-columns -> Defines the columns of the grid displays inside the combo box.

data-bind -> We need to define the source, in my case it is customer view model. This will be initialized in JavaScript as given below.

JavaScript

  1. $(document).ready(function () {
  2. var viewModel = kendo.observable({
  3. selectedCustomer: null,
  4. isVisible: true,
  5. isEnabled: true,
  6. customer: new kendo.data.DataSource({
  7. transport: {
  8. read: {
  9. url: "http://localhost:11207/api/Customer/CustomerDetails",
  10. dataType: "json"
  11. }
  12. }
  13. })
  14. });
  15. kendo.bind($("#example"), viewModel);

Result in browser

Reference
https://demos.telerik.com/kendo-ui/multicolumncombobox/mvvm
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed.