Custom Widget MVVM

6 posts, 0 answers
  1. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 22 Jul 2014 Link to this post

    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. 
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Jul 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 23 Jul 2014 Link to this post

    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.
  5. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 24 Jul 2014 in reply to Matjaz Link to this post

    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);
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Jul 2014 Link to this post

    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!
     
  7. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 25 Jul 2014 in reply to Petyo Link to this post

    The code is working for me.
Back to Top
Kendo UI is VS 2017 Ready