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>
<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>
3 comments:
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
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.
Post a Comment