New to Kendo UI for jQuery? Download free 30-day trial

Configure Deferred Value Binding

The following example demonstrates how to configure a deferred value binding in a Kendo UI ComboBox.

  <h2>Combobox Server Side Filter</h2>

    <input id="productID" name="productID"
       data-placeholder="Select a product"
       data-bind="deferredValue: productID, source: products" />

  <script type="text/javascript">
    //create a custom binder that works only with Objects and honours "autoBind:false" state ={
        init: function (widget, bindings, options) {
  , widget.element[0], bindings, options);
            this.widget = widget;
            this._change = $.proxy(this.change, this);
            this.widget.bind("change", this._change);
        refresh: function () {
            if (!this._initChange) {
                var widget = this.widget;
                var binding = this.bindings.deferredValue;
                var source = binding.source;
                var value = binding.get();

                if (value) {
                  if (widget.options.autoBind === false) {

                    //Use this approach instead if you would like to not make request to server on OPEN
                    //widget.dataSource.add({ ProductID: source.productID, ProductName: source.productName });
                  } else {
        change: function () {
            this._initChange = true;
            this.bindings.deferredValue.set(this.widget.dataItem() || null);
            this._initChange = false;
        destroy: function () {
            this.widget.unbind("change", this._change);


    // Viewmodel
    var viewModel = kendo.observable({
      productID: null,
      products: null,

      initialize: function(productID, productName) {
        viewModel.set('productID', productID);
        viewModel.set('productName', productName);

        var ds = new{
          type: "odata",
          serverFiltering: true,
          transport: {
              read: {
                  url: "",

        viewModel.set('products', ds);

    // Initialize
    viewModel.initialize(5, "Chef Anton's Gumbo Mix");

    // bind it all up
    kendo.bind(document.body, viewModel);

See Also

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.

In this article
Not finding the help you need? Improve this article