Wednesday, May 13, 2009

LinkButton/Button embedded in a CollapsiblePanel Header - Click Events not fired.

If a LinkButton is in Header of CollapsiblePanel, you will find the onClick of it will not be fired. To resolve this issue, we can set SuppressPostBack="false" for CollapsiblePanel. Then the onClick event will be fired fine. But the new problem is coming -- the CollapsiblePanel is still working, when you click the LinkButton, the onclick event is working and the CollapsiblePanel is still expended.

If we'd like to achieve the LinkButton firing without CollapsiblePanel expending, we have to call some JavaScript to cancel the CollapsiblePanel expending.


<head runat="server">
    <title></title>
    <script type="text/javascript">
        var togger = 0;
        function pageLoad() {
            $find('CollapsiblePanelBehavior1').add_expanding(function(obj, e) {
                if (togger == 1) {
                    e.set_cancel(true);
                    togger = 0;
                }
            });       
        }  
    </script> 
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />

     <asp:Panel ID="Panel1" runat="server" style="background-color:#EEEEEE;" Height="30px" >
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">check</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1_SelectData" runat="server">(Hide checking...)</asp:Label>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show to search...)"/>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="togger=1;" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
                </div>
            </div>
       </asp:Panel> 
      <asp:Panel ID="Panel1Data" runat="server" style="background-color:#EEEEEE;" Height="30px">
            text1
      
    </asp:Panel>
    <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server"
        TargetControlID="Panel1Data"
        ExpandControlID="Panel1"
        CollapseControlID="Panel1" 
        Collapsed="false"
        TextLabelID="Label1_SelectData"
        ImageControlID="ImageButton1"   
        ExpandedText="(Hide searching...)"
        CollapsedText="(Show to search...)"
        ExpandedImage="~/images/collapse_blue.jpg"
        CollapsedImage="~/images/expand_blue.jpg"
        SuppressPostBack="false"
        SkinID="CollapsiblePanelDemo" BehaviorID="CollapsiblePanelBehavior1" />
       
       
    </div>
    </form>
</body>

4 comments:

Vince said...

Great job.....
___________________

Vince

Your movies on demand

ABC said...
This comment has been removed by the author.
Pravesh Singh said...

This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url....
Ajax Toolkit CollapsiblePanelExtender Control in ASP.Net

Thanks

Anonymous said...

What if I have multiple collapsiblepanelextenders dynamically generated? I get this error:
Two components with the same id 'CollapsiblePanelBehavior' can't be added to the application.

How do I get around this in the script? My id's are in the format: CollapsiblePanelBehaviorID

Thanks.