This is a migrated thread and some comments may be shown as answers.

Custom Widget MVVM

5 Answers 192 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Matjaz asked on 22 Jul 2014, 05:21 AM

I am trying create a new custom widget based on this tutorial.
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 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

kendo.bind($(document.body), MVVM);

if I write

<input data-role="MyTextbox" data-bind="value: valuerole" />

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.

5 Answers, 1 is accepted

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.

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);

I went several times through kendo.autocomplete.js, but no idea, what is missing.

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:

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);