Tuesday, May 12, 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>
at 11:00 PM
Labels: ,