I am trying create a new custom widget based on this tutorial.
I came this far:
It works in case where I manually set kendoMyTextBox, but not where I use data-role attribute.
It would be also nice if someone help me with providing code, how can I set value attribute for value. I get undefined is not a function in line
if I write
I don't know if I need to write some code in refresh or not?
And for the last: Why is preferred way to use that (instead of this) when creating custom widget.
I came this far:
var MyTextbox = kendo.ui.Widget.extend( { init: function (element, options) { kendo.ui.Widget.fn.init.call(this, element, options); $(element).css("border-color", "#FF0000"); }, options: { name: "MyTextbox", }, events: ["dataBinding", "dataBound"], refresh: function() { var that = this; that.trigger("dataBinding"); that.trigger("dataBound"); } }); kendo.ui.plugin(MyTextbox); </script></head><body> <input data-role="MyTextbox" /> <input id="MyTextbox" /> <script> $(document).ready(function() { $("#MyTextbox").kendoMyTextbox(); }); </script></body></html>It would be also nice if someone help me with providing code, how can I set value attribute for value. I get undefined is not a function in line
kendo.bind($(document.body), MVVM);<input data-role="MyTextbox" data-bind="value: valuerole" />And for the last: Why is preferred way to use that (instead of this) when creating custom widget.
5 Answers, 1 is accepted
0
Hi Matjaz,
the data-role attribute should be lowercased - please check this example. Regarding the value binding support - you may check how the widgets which support it implement it in our public repository.
Regards,
Petyo
Telerik
the data-role attribute should be lowercased - please check this example. Regarding the value binding support - you may check how the widgets which support it implement it in our public repository.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matjaz
Top achievements
Rank 1
Rank 1
answered on 23 Jul 2014, 04:01 PM
Hi data-role works.
But I can not get to work value binding. If I change value and read this value nothing is change MVVM is not changed.
I went several times through kendo.autocomplete.js, but no idea, what is missing.
But I can not get to work value binding. If I change value and read this value nothing is change MVVM is not changed.
var MyTextbox = kendo.ui.Widget.extend({ init: function (element, options) { kendo.ui.Widget.fn.init.call(this, element, options); $(element).css("border-color", "#FF0000"); }, options: { name: "MyTextbox", }, events: ["dataBinding", "dataBound"], refresh: function() { var that = this; that.trigger("dataBinding"); that.trigger("dataBound"); }, value: function (value) { if (value !== undefined) { this._accessor(value); this._old = this._accessor(); } else { return this._accessor(); } }, _accessor: function (value) { var that = this, element = that.element[0]; if (value !== undefined) { element.value = value === null ? "" : value; } else { value = element.value; if (element.className.indexOf("k-readonly") > -1) { return value; } return value; } },});kendo.ui.plugin(MyTextbox); 0
Matjaz
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2014, 04:44 PM
This took me a while. Removing line by line, copying code from List class...
So, for everyone use:
So, for everyone use:
var MyTextbox = kendo.ui.Widget.extend( { init: function (element, options) { var that = this; kendo.ui.Widget.fn.init.call(that, element, options); $(element).addClass("k-input").on("focusout", function () { that.change(); }); }, options: { name: "MyTextbox", }, events: ["dataBinding", "databound", "change"], refresh: function() { this.trigger("dataBinding"); this.trigger("databound"); }, value: function (value) { if (value !== undefined) { this.element[0].value = value === null ? "" : value; } else { value = this.element[0].value; return value; } }, change: function() { var value = this.value(), trigger = false; if (value !== this._old) { trigger = true; } if (trigger) { this._old = value; this.trigger('change'); this.element.trigger('change'); } }, }); kendo.ui.plugin(MyTextbox); 0
Hi Matjaz,
As far as I can see, the code does not bind to the DOM input element changes anywhere - this is what is missing. You can check how the autocomplete implements it here.
Regards,
Petyo
Telerik
As far as I can see, the code does not bind to the DOM input element changes anywhere - this is what is missing. You can check how the autocomplete implements it here.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matjaz
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2014, 01:33 PM
The code is working for me.