Kendo 2016.3.1118 and jQuery 3.1.1: Uncaught Error: The deferredValue binding is not supported by the input element

[Bernd]

Hi.

With jQuery 2.x this funstion worked for the deferred value binding.

01.function createComboBoxBinder() {
02.    // taken from the Telerik UI 4 MVC examples
03.    // http://www.telerik.com/forums/init-combobox-with-current-value-retrieve-entire-list-if-search-attempted
04.    kendo.data.binders.widget.deferredValue = kendo.data.Binder.extend({
05.      init: function (widget, bindings, options) {
06.                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
07.                this.widget = widget;
08.                this._change = $.proxy(this.change, this);
09.                this.widget.bind("change", this._change);
10.             },
11.      refresh: function () {
12.                     var widget = this.widget;
13.                     var binding = this.bindings.deferredValue;
14.                     var value = binding.get();
15.
16.                     if (!this._initChange) {
17.                       if (value) {
18.                         if (widget.options.autoBind === false) {
19.                            //Bind the widget with single item if deferred binding is used
20.                            widget.dataSource.data([value]);
21.                            widget.value(value[widget.options.dataValueField]);
22.                         } else {
23.                            //set widget value directly
24.                            this.widget.value(value[widget.options.dataValueField]);
25.                         }
26.                       }
27.                     } else {
28.                       // set the data source value to show the selected value in the grid row
29.                       binding.source.Language = value[widget.options.dataValueField];
30.                     }
31.                   },
32.      change: function () {
33.                      this._initChange = true;
34.                      this.bindings.deferredValue.set(this.widget.dataItem());
35.                      this._initChange = false;
36.                    },
37.      destroy: function () {
38.                       this.widget.unbind("change", this._change);
39.                    }
40.});

This is the combo box within a grid popup editor cshtml.

01.<div class="k-edit-field">
02.    @(Html.Kendo().ComboBox()
03.        .Name(componentName: "LangSelector")
04.        //use the data-skip attribute to prevent adding the default value binding and add the data-bind attribute for the custom binder
05.        .HtmlAttributes(new { data_skip = "true", data_bind = "deferredValue: LanguageItem" })
06.        .DataTextField(field: "Name")
07.        .DataValueField(field: "Id")
08.        .MinLength(length: 3)
09.        .Enable(value: false)
10.        .AutoBind(autoBind: false)
11.        .Filter(FilterType.Contains)
12.        // define a custom data source to handle the kendo .ToDataSourceResult method
13.        .DataSource(ds => ds.Custom().Type(type: "aspnetmvc-ajax").Transport(trans => { trans.Read(read => read.Action(actionName: "GetCultures", controllerName: "ResourcesGrid").Data(handler: "GetTypeAhead")); })
14.                              .ServerFiltering(enabled: true)
15.                              .Schema(schema => { schema.Data(data: "Data").Total(total: "Total"); }))
16.    )
17.</div>

 

After upgrading to Kendo 2016.3.1118 and jQuery 3.1.1 I get the following error message and jquery migrate hints in the console. Any ideas what I need to change to get this fixed?

Kind regards

Bernd

001.VM4028:590 Detected Kendo UI version: "2016.3.1118"
002.browserLink:64 [16:46:54 GMT+0100 (Mitteleuropäische Zeit)] Browser Link: Failed to send message to browser link server:
003.Error: SignalR: Connection must be started before data can be sent. Call .start() before .send()
004.kendo.all.js:9192 Uncaught Error: The deferredValue binding is not supported by the input element
005.    at init.applyBinding (kendo.all.js:9192)
006.    at init.bind (kendo.all.js:9155)
007.    at a (kendo.all.js:9305)
008.    at a (kendo.all.js:9314)
009.    at a (kendo.all.js:9314)
010.    at a (kendo.all.js:9314)
011.    at Object.s [as bind] (kendo.all.js:9329)
012.    at init.refresh (kendo.all.js:38975)
013.    at new init (kendo.all.js:38881)
014.    at HTMLDivElement.<anonymous> (kendo.all.js:2409)
015.applyBinding @ kendo.all.js:9192
016.bind @ kendo.all.js:9155
017.a @ kendo.all.js:9305
018.a @ kendo.all.js:9314
019.a @ kendo.all.js:9314
020.a @ kendo.all.js:9314
021.s @ kendo.all.js:9329
022.refresh @ kendo.all.js:38975
023.init @ kendo.all.js:38881
024.(anonymous) @ kendo.all.js:2409
025.each @ jquery-3.1.1.js:368
026.each @ jquery-3.1.1.js:157
027.e.fn.(anonymous function) @ kendo.all.js:2408
028._createPopupEditor @ kendo.all.js:47833
029.editRow @ kendo.all.js:47670
030.addRow @ kendo.all.js:48072
031.(anonymous) @ kendo.all.js:48108
032.dispatch @ jquery-3.1.1.js:5201
033.elemData.handle @ jquery-3.1.1.js:5009
034.jquery-migrate-3.0.0.js:62 JQMIGRATE: jQuery.fn.removeAttr no longer sets boolean properties: disabled
035.migrateWarn @ jquery-migrate-3.0.0.js:62
036.(anonymous) @ jquery-migrate-3.0.0.js:216
037.each @ jquery-3.1.1.js:368
038.jQuery.fn.removeAttr @ jquery-migrate-3.0.0.js:214
039._editable @ kendo.all.js:31523
040.readonly @ kendo.all.js:27301
041._enable @ kendo.all.js:27667
042.init @ kendo.all.js:31098
043.init @ kendo.all.js:61791
044.(anonymous) @ kendo.all.js:2409
045.each @ jquery-3.1.1.js:368
046.each @ jquery-3.1.1.js:157
047.e.fn.(anonymous function) @ kendo.all.js:2408
048.initialize @ kendo.all.js:62262
049.(anonymous) @ kendo.all.js:62633
050.each @ jquery-3.1.1.js:368
051.each @ jquery-3.1.1.js:157
052.bindTo @ kendo.all.js:62624
053.init @ kendo.all.js:54606
054.(anonymous) @ kendo.all.js:2409
055.each @ jquery-3.1.1.js:368
056.each @ jquery-3.1.1.js:157
057.e.fn.(anonymous function) @ kendo.all.js:2408
058.(anonymous) @ VM4039:1
059.mightThrow @ jquery-3.1.1.js:3570
060.process @ jquery-3.1.1.js:3638
061.jquery-migrate-3.0.0.js:64 console.trace
062.migrateWarn @ jquery-migrate-3.0.0.js:64
063.(anonymous) @ jquery-migrate-3.0.0.js:216
064.each @ jquery-3.1.1.js:368
065.jQuery.fn.removeAttr @ jquery-migrate-3.0.0.js:214
066._editable @ kendo.all.js:31523
067.readonly @ kendo.all.js:27301
068._enable @ kendo.all.js:27667
069.init @ kendo.all.js:31098
070.init @ kendo.all.js:61791
071.(anonymous) @ kendo.all.js:2409
072.each @ jquery-3.1.1.js:368
073.each @ jquery-3.1.1.js:157
074.e.fn.(anonymous function) @ kendo.all.js:2408
075.initialize @ kendo.all.js:62262
076.(anonymous) @ kendo.all.js:62633
077.each @ jquery-3.1.1.js:368
078.each @ jquery-3.1.1.js:157
079.bindTo @ kendo.all.js:62624
080.init @ kendo.all.js:54606
081.(anonymous) @ kendo.all.js:2409
082.each @ jquery-3.1.1.js:368
083.each @ jquery-3.1.1.js:157
084.e.fn.(anonymous function) @ kendo.all.js:2408
085.(anonymous) @ VM4039:1
086.mightThrow @ jquery-3.1.1.js:3570
087.process @ jquery-3.1.1.js:3638
088.jquery-migrate-3.0.0.js:62 JQMIGRATE: jQuery.fn.removeAttr no longer sets boolean properties: readonly
089.migrateWarn @ jquery-migrate-3.0.0.js:62
090.(anonymous) @ jquery-migrate-3.0.0.js:216
091.each @ jquery-3.1.1.js:368
092.jQuery.fn.removeAttr @ jquery-migrate-3.0.0.js:214
093._editable @ kendo.all.js:31524
094.readonly @ kendo.all.js:27301
095._enable @ kendo.all.js:27667
096.init @ kendo.all.js:31098
097.init @ kendo.all.js:61791
098.(anonymous) @ kendo.all.js:2409
099.each @ jquery-3.1.1.js:368
100.each @ jquery-3.1.1.js:157
101.e.fn.(anonymous function) @ kendo.all.js:2408
102.initialize @ kendo.all.js:62262
103.(anonymous) @ kendo.all.js:62633
104.each @ jquery-3.1.1.js:368
105.each @ jquery-3.1.1.js:157
106.bindTo @ kendo.all.js:62624
107.init @ kendo.all.js:54606
108.(anonymous) @ kendo.all.js:2409
109.each @ jquery-3.1.1.js:368
110.each @ jquery-3.1.1.js:157
111.e.fn.(anonymous function) @ kendo.all.js:2408
112.(anonymous) @ VM4039:1
113.mightThrow @ jquery-3.1.1.js:3570
114.process @ jquery-3.1.1.js:3638
115.jquery-migrate-3.0.0.js:64 console.trace
116.migrateWarn @ jquery-migrate-3.0.0.js:64
117.(anonymous) @ jquery-migrate-3.0.0.js:216
118.each @ jquery-3.1.1.js:368
119.jQuery.fn.removeAttr @ jquery-migrate-3.0.0.js:214
120._editable @ kendo.all.js:31524
121.readonly @ kendo.all.js:27301
122._enable @ kendo.all.js:27667
123.init @ kendo.all.js:31098
124.init @ kendo.all.js:61791
125.(anonymous) @ kendo.all.js:2409
126.each @ jquery-3.1.1.js:368
127.each @ jquery-3.1.1.js:157
128.e.fn.(anonymous function) @ kendo.all.js:2408
129.initialize @ kendo.all.js:62262
130.(anonymous) @ kendo.all.js:62633
131.each @ jquery-3.1.1.js:368
132.each @ jquery-3.1.1.js:157
133.bindTo @ kendo.all.js:62624
134.init @ kendo.all.js:54606
135.(anonymous) @ kendo.all.js:2409
136.each @ jquery-3.1.1.js:368
137.each @ jquery-3.1.1.js:157
138.e.fn.(anonymous function) @ kendo.all.js:2408
139.(anonymous) @ VM4039:1
140.mightThrow @ jquery-3.1.1.js:3570
141.process @ jquery-3.1.1.js:3638

[Georgi Krustev]

Hello Bernd,

In general, the most notable breaking change in jQuery 3 is the different behavior of Promises. I suppose that something breaks in your specific case (using a custom MVVM binding) and most probably it's a timing issue.

I would suggest you verify that the deferredValue binding is defined when the widget is about to be initialized. If it is not, then you will need to ensure that it is available before the widgets initialization.

If the problem still persists, please send us a repro demo that demonstrates the issue. You could use our Dojo platform, as the issue seems not related to server implementation.


Regards,
Georgi Krustev
Telerik by Progress

[Bernd]

Hello Georgi.

Due to an issue in the multi select widget I have to revert to a previus version of jquery.

Thanks to your answer I'll know where to look when we are really upgrading jquery.

Merry Xmas

Bernd