Expander/Disclosure Widget

5 posts, 0 answers
  1. Dan
    Dan avatar
    2 posts
    Member since:
    Oct 2012

    Posted 02 Aug 2013 Link to this post

    Has anyone made an expander/disclosure widget?  I couldn't find any code out there so I threw one together.

    (function ($) {
        var defaultDuration = 200;
     
        var expander = kendo.ui.Widget.extend({
            init: function (element, options) {
                kendo.ui.Widget.fn.init.call(this, element, options);
     
                this._Render();
            },
     
            options: {
                name: "Expander",
                title: "",
                isExpanded: true
            },
     
            IsExpanded: false,
     
            Expand: function (duration) {
                var $this = this;
                if ($this.contents) {
                    if (duration == null) {
                        duration = defaultDuration;
                    }
     
                    $this.contents.show(duration, function () { $this.IsExpanded = true; });
                }
     
                if ($this.button) {
                    $this.button.find("span")
                        .removeClass("k-i-arrowhead-s")
                        .addClass("k-i-arrowhead-n");
                }
            },
     
            Collapse: function (duration) {
                var $this = this;
                if ($this.contents) {
                    if (duration == null) {
                        duration = defaultDuration;
                    }
     
                    $this.contents.hide(duration, function () { $this.IsExpanded = false; });
                }
     
                if ($this.button) {
                    $this.button.find("span")
                        .removeClass("k-i-arrowhead-n")
                        .addClass("k-i-arrowhead-s");
                }
            },
     
            Toggle: function () {
                if (this.IsExpanded) {
                    this.Collapse();
                }
                else {
                    this.Expand();
                }
            },
     
            _Render: function () {
                this._MutateDom();
                this._SetInitialExpandState();
            },
     
            _MutateDom: function () {
                if (($(this.element).prop("tagName") || "").toString().toUpperCase() == "FIELDSET") {
                    this._MutateFromFieldSet();
                }
                else {
                    this.contents = $(this.element).attr("data-role", "expanderContents");
                    this.fieldSet = $("<fieldset>").attr("style", this.contents.attr("style"));
                    this.contents.removeAttr("style");
                    this.contents.wrap(this.fieldSet);
                    this.fieldSet = this.contents.parent();
                    this.legend = $("<legend>").text(this.options.title);
                    this.fieldSet.prepend(this.legend);
                }
     
                this._AddExpanderButton();
            },
     
            _MutateFromFieldSet: function () {
                this.fieldSet = $(this.element);
                var children = this.fieldSet.find(">:not(legend)");
                this.contents = $("<div>").attr("data-role", "expanderContents");
                this.fieldSet.append(this.contents);
                this.contents.append(children);
                this.legend = this.fieldSet.find(">legend");
                if (this.legend.length == 0) {
                    this.legend = $("<legend>").text(this.options.title);
                    this.fieldSet.prepend(this.legend);
                }
            },
     
            _AddExpanderButton: function () {
                var expanderRadius = 12;
                var icon = $("<span>")
                    .addClass("k-icon")
                    .css({
                        "position": "relative",
                        "top": "-5px",
                        "left": "-4px"
                    });
                this.button = $("<button>")
                    .addClass("k-button")
                    .css({
                        width: (expanderRadius * 2) + "px",
                        height: (expanderRadius * 2) + "px",
                        "border-radius": expanderRadius + "px",
                        "margin-right": this.legend.text() ? "4px" : 0
                    })
                    .click($.proxy(this.Toggle, this));
                this.button.append(icon);
                this.legend.prepend(this.button);
            },
     
            _SetInitialExpandState: function () {
                if (this.options.isExpanded) {
                    this.Expand(0);
                }
                else {
                    this.Collapse(0);
                }
            }
        });
     
        kendo.ui.plugin(expander);
     
    })(jQuery);
  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 05 Aug 2013 Link to this post

    Hi Dan,

    Thanks for sharing your solution in this public forum thread. Thus you can help other users who are searching for a similar implementation. I updated your Telerik points for the involvement.

    Best regards,
    Sebastian
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Saykor
    Saykor avatar
    70 posts
    Member since:
    Feb 2011

    Posted 16 Oct 2014 Link to this post

    Hello,
    It is possible to provide example how to use it?
    Thank you in advance.

    Regards
  4. Dan
    Dan avatar
    2 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2014 in reply to Saykor Link to this post

    Sure thing.  You'll probably want to apply your own styling to the fieldset and legend elements.

    http://dojo.telerik.com/@danmiller1113/OliRe/6
  5. Saykor
    Saykor avatar
    70 posts
    Member since:
    Feb 2011

    Posted 17 Oct 2014 in reply to Dan Link to this post

    Thank you for your fast answer.
    It is exactly what I need.
Back to Top