declaratively set options on custom widget

3 posts, 1 answers
  1. Jake
    Jake avatar
    24 posts
    Member since:
    Nov 2010

    Posted 06 Jun 2013 Link to this post

    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.
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 07 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jake
    Jake avatar
    24 posts
    Member since:
    Nov 2010

    Posted 07 Jun 2013 Link to this post

    Perfect! Thank you!
Back to Top