What's New?

[CLOSED] Collapse all Accordion children

Page 1 of 2 12 LastLast
  1. #1
    Jun 06, 2012, 11:20 AM

    [CLOSED] Collapse all Accordion children

    Hi Folks, in version 1.x of Ext.Net it was possible to collapse all children of a Accordion, as shown in the following example:
    https://examples2.ext.net/#/Layout/A...sic_in_Markup/

    But in version 2.x it is not possible anymore
    https://examples1.ext.net/#/Layout/A...sic_in_Markup/

    i would like to know whether it's a deprecated functionality or a bug.

    Thanks in advance
    Last edited by Daniil; Jul 01, 2014 at 2:46 PM. Reason: [CLOSED]
  2. #2
    Jun 06, 2012, 3:31 PM
    Hi,

    Confirm. But I would not consider it a bug, because it's not documented behavior.

    To achieve the same behavior as it is in Ext.NET v1, I can recommend the following solution. Please set the AfterRender listener for the container with AccordionLayout.

    Example
    <AfterRender Fn="onAfterRender" />
    <script type="text/javascript">
    var onAfterRender = function (ct) {
        ct.items.each(function (item) {
            item.on("beforeexpand", function () {
                return !this.layout.processing;
            }, 
            ct);
        });
    };
</script>
  3. #3
    Jun 06, 2012, 6:36 PM
    Thank you Daniil, please mark it as resolved
  4. #4
    Jun 25, 2012, 12:18 PM
    The thread is related to this one.
    http://forums.ext.net/showthread.php?19694
  5. #5
    Nov 06, 2012, 3:57 PM
    For me, the following approach (add a hidden panel - line 10) is better because it prevents http://forums.ext.net/showthread.php?19694

    <ext:Panel ID="Panel1" Margin="10" Title="Accordion" Width="250" Height="200" Icon="ApplicationTileVertical"
    Layout="Accordion" runat="server">
    <LayoutConfig>
        <ext:AccordionLayoutConfig Multi="true" />
    </LayoutConfig>
    <Items>
        <ext:Panel Title="Ext" runat="server" />
        <ext:Panel Title="Net" runat="server" />
        <ext:Panel Title="Ext.Net" runat="server" />
        <ext:Panel Title="Hidden" Hidden="true" runat="server" />
    </Items>
</ext:Panel>
  6. #6
    Nov 06, 2012, 5:03 PM
    An interesting trick, thank you for sharing!
  7. #7
    Jun 23, 2014, 12:33 PM
    Hello, Daniil,

    Sorry for bringing this thread up again, but I tried the AfterRender trick and it didn't work. The only difference it made was that the first panel remained expanded at all times.
    The only options that seem to work are:
    1) Add a hidden panel before every actual panel, and not only one at the end, as per RCN's post (that only lets you collapse the last panel, but the rest of the behavior is still there).
    2) Add a hidden panel before the first panel only and use the AfterRender trick (therefore now the panel that remains expanded is this hidden one).

    Might there be another way to do this instead of these somewhat "dirty" workarounds?

    Thanks and regards,

    Andrew

    PS: Please, tell me if it's ok if I reply here or I should post a new thread in the non-Premium section.
    Last edited by ALobpreis; Jun 23, 2014 at 2:51 PM.
  8. #8
    Jun 24, 2014, 11:43 AM
    ALobpreis, i will try to implement a "clean" workaround.
  9. #9
    Jun 24, 2014, 11:56 AM
    It's possible to overcome the issue by preventing the expansion of the next or the previous panel of the panel that is being collapsed, as shown below on line 39.

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        Ext.layout.container.Accordion.override({
            onComponentCollapse: function (comp) {
                var me = this,
            owner = me.owner,
            toExpand,
            expanded,
            previousValue;

                if (me.owner.items.getCount() === 1) {
                    // do not allow collapse if there is only one item
                    return false;
                }

                if (!me.processing) {
                    me.processing = true;
                    previousValue = owner.deferLayouts;
                    owner.deferLayouts = true;
                    toExpand = comp.next() || comp.prev();

                    // If we are allowing multi, and the "toCollapse" component is NOT the only expanded Component,
                    // then ask the box layout to collapse it to its header.
                    if (me.multi) {
                        expanded = me.owner.query('>panel:not([collapsed])');

                        // If the collapsing Panel is the only expanded one, expand the following Component.
                        // All this is handling fill: true, so there must be at least one expanded,
                        if (expanded.length === 1) {
                            ////////////////////////////////////////////////////////////////////
                            ////////////////////////////////////////////////////////////////////
                            //Allows the panel to be collapsed without expand the next or the previous one
                            ////////////////////////////////////////////////////////////////////
                            ////////////////////////////////////////////////////////////////////
                            //toExpand.expand();
                        }

                    } else if (toExpand) {
                        toExpand.expand();
                    }
                    owner.deferLayouts = previousValue;
                    me.processing = false;
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Panel Margin="10" Title="Accordion" Width="250" Height="200" Icon="ApplicationTileVertical" Layout="Accordion" runat="server">
        <LayoutConfig>
            <ext:AccordionLayoutConfig Multi="true" />
        </LayoutConfig>
        <Items>
            <ext:Panel Title="Ext" runat="server" />
            <ext:Panel Title="Net" runat="server" />
            <ext:Panel Title="Ext.Net" runat="server" />
        </Items>
    </ext:Panel>
</body>
</html>
  10. #10
    Jun 24, 2014, 11:57 AM
    ALobpreis, let me know whether it helps you
    Last edited by RCN; Jun 24, 2014 at 12:00 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Collapse unique accordion´s child when Multi config is set to true.
    By RCN in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 27, 2012, 10:29 AM
  2. [CLOSED] FieldSet graphic (icon for expand / collapse) bottom border line is not showing in google chrome while collapse.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  3. Custom collapse/expand icons for accordion layout panesl
    By SMS in forum 1.x Help
    Replies: 11
    Last Post: May 03, 2011, 12:56 PM
  4. Accordion align in Viewport, bottom accordion item is cutted
    By Paul D in forum 1.x Help
    Replies: 5
    Last Post: Nov 11, 2010, 7:33 PM
  5. [CLOSED] [1.0] Accordion Collapse Delay?
    By MP in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Sep 02, 2010, 8:33 PM

Posting Permissions