declaratively set options on custom widget

[Jake]

I know that I can set options on a custom widget if I instantiate the widget in code, so that the following should output "foo" to the console.

var MyWidget = kendo.ui.Widget.extend({
    init: function(element, options) {
        kendo.ui.Widget.fn.init.call(this, element, options);

        console.log(options.myOption);
    },
    options: {
        name: "MyWidget"
    }
});
kendo.ui.plugin(MyWidget);

$("#widgetRoot").kendoMyWidget({ myOption: "foo" });

Is there any way that I can do the same thing using declarative binding? I get as far as

<span id="widgetRoot" data-role="mywidget" data-bind="X"></span>

but there doesn't seem to be anything I can put in for X that gives me access to the options parameter.  I haven't been able to find anything in the blog  posts or documentation to shed light on this.

[Alexander Valchev]

Hi Jake,

Thank you for getting in touch with us.
In order to do the same thing using declarative initialization you should:

1. Register the option in the options object of the widget.
   

   options: {
       name: "MyWidget",
       myOption: "default"
   }

   
   
   
2. Set it declaratively according to the convention.
   

   <span id="widgetRoot" data-role="mywidget" data-my-option="foo"></span>

3. Call kendo.bind or kendo.init which will loop through the DOM elements and build widgets according to their data-role.
   

   kendo.init($(document.body));

Complete code should look like:

<span id="widgetRoot" data-role="mywidget" data-my-option="foo"></span>
<script>
    var MyWidget = kendo.ui.Widget.extend({
        init: function(element, options) {
            kendo.ui.Widget.fn.init.call(this, element, options);

            console.log(options.myOption);
        },
        options: {
            name: "MyWidget",
            myOption: "default"
        }
    });
    kendo.ui.plugin(MyWidget);

    //$("#widgetRoot").kendoMyWidget({ myOption: "foo" });
    kendo.init($(document.body));
</script>

I hope this will help.

Regards,
Alexander Valchev
Telerik

[Jake]

Perfect! Thank you!