Kendo MultiColumn Combo Box With MVVM Pattern

From this blog, you will learn how to implement the kendo multicolumn combo box using the MVVM pattern. In my last article, I explained how to do remote data binding for the kendo multi-column combo box, in this blog I’m extending it and will explain to you how to do same remote data binding to kendo multi-column combo box.

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%;" />-->  
  5.               
  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'}
  13.                     
  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.