Expand All / Collapse All panes in Ajax Accordion Extender

There is no direct way to Expand/Collapse all panes in Accordion Extender. Using following java script, Accordion can be Expand/Collapse all panes in one click.

Expand All :


            var behavior = $get("<%=accMain.ClientID%>").AccordionBehavior;
            for (var i = 0; i < behavior._panes.length; i++) {
                behavior.get_Pane(i).content.style.display = 'block';
                behavior.get_Pane(i).content.height = behavior.get_Pane(i).content.scrollHeight;
                behavior.get_Pane(i).content.style.height = behavior.get_Pane(i).content.scrollHeight + 'px';
            }



Collapse All :


            var behavior = $get("<%=accMain.ClientID%>").AccordionBehavior;
            for (var i = 0; i < behavior._panes.length; i++) {
                behavior.get_Pane(i).content.style.display = 'none';
                behavior.get_Pane(i).content.height = 0;
                behavior.get_Pane(i).content.style.height = '0px';
            }          
            behavior.set_SelectedIndex(-1);

Comments

Post a Comment

Popular posts from this blog

Embedding PowerBI with ASP.NET Core 2 and Angular(2,4,5)

Image
Background 
Integration of PowerBI into ASP.Net is straightforward as far as you follow the Microsoft documentation. When it comes to ASP.NET Core 2, it is not, at the time of writing this article. Let me guide you through the steps I followed to successfully embed PowerBI reports to our ASP.NET Core2 / Angular5 enterprise website.

Two Scenarios

 1. User Owns Data - where users will be directly registered in PowerBi portal
https://docs.microsoft.com/en-us/power-bi/developer/integrate-report
2. App Owns Data - you have an application which owns the data and you have users to view these reports but they are not registered in PowerBI as direct users - ISV situation
https://docs.microsoft.com/en-us/power-bi/developer/embed-sample-for-customers
Following steps are focused on scenario 2 which is app own data, but it is not limited to use this information for scenario 1 as well.
[Flow of authentication and authorization (from Microsoft documentation)]
Step 1: Register your app
Make sure your app…
Read more

Handling Exit Event of Console Application in C#

Do you wan to do something on the exit event of Console Application. .Net framework does not provide such direct event to do that. You can use following workaround to have that kind of event in your application.


        [STAThread]
        static void Main(string[] args)
        {
            HandlerRoutine hr = new HandlerRoutine(Handler);
            SetConsoleCtrlHandler(hr, true);
            GC.KeepAlive(hr); 

        }

        public static void DoOnAppExit()
        {
                  //Do something......
        }

        #region Handle App Exit

        static Boolean Handler(CtrlTypes CtrlType)
        {
            // A switch to handle the event type.
            switch (CtrlType)
            {
                case CtrlTypes.CTRL_C_EVENT:
                case CtrlTypes.CTRL_BREAK_EVENT:
                case CtrlTypes.CTRL_CLOSE_EVENT:
                case CtrlTypes.CTRL_LOGOFF_EVENT:
                case CtrlTypes.CTRL_SHUTDOWN_EVENT:
                    DoOnAppExit();
  …
Read more

CSS text-overflow ellipsis in the beginning of the the text - Left Ellipsis using CSS in a Flex box

Image
Problem:
If you want to have css text overflow ellipsis in the left (beginning of the text), there is no straight forward solution to get it working in all browsers (especially in Safari). There are several CSS tricks that you will end up only working few browsers. It will be further difficult, if you are trying to achieve this in flex container.
Solution:
Combining few ideas found in the stack-overflow, manged to get it working in most of the browsers including safari.
".cont" is flex box and either you can set a width to it, or can inherit the width from parent container element.
.ellipsis:after { content: ""; background-color: white; color: transparent; position: relative; z-index: 2; min-width: 100%; display: inline-block; min-height: 1rem; } .ellipsis { direction: rtl; display: inline-block; width: calc(100% - .1em); white-space: nowrap; overflow: hidde…
Read more