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

Custom Widget MVVM

5 Answers 134 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
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

Sort by
0
Petyo
Telerik team
answered on 23 Jul 2014, 12:20 PM
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
 
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
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.
0
Matjaz
Top achievements
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:
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
Petyo
Telerik team
answered on 25 Jul 2014, 12:06 PM
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
 
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
answered on 25 Jul 2014, 01:33 PM
The code is working for me.
Tags
MVVM
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Matjaz
Top achievements
Rank 1
Share this question
or