I am developing one ASP.NET Web Page in that I Want to show data, as it is in the attached link. So Please go through it. So I want the similar functionality in my We Page also.
As We can see here I have separate section for Store Details, POS Details, Registered Banks Details and so on. And If I click on +/- symbol, I should be able to maximize and minimize that particular section.
Actually I am very new to Asp.net, I have learned things by myself only so far, Nobody here to guide me. So I have no idea how to do this? What to do and what items I need to select from toolbox in Visual Studio. I have idea about PAnel Control , but with panel control I am not able to get maximize and minimize functionality here. Please help me out .
Thanks
!( http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png )
For this you can use AJAX Toolkit controls (ToolkitScriptManager and CollapsiblePanelExtender). And for that do following steps:
(1) Learn and Download AJAX Toolkit from
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/ or
http://www.asp.net/ajaxlibrary/act.ashx or
http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
(2) Add toolkit into your project and create one example with any one control of the toolkit
(3) Try below example as you want
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlCPTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
POS DETAILS
</td>
<td align="right" valign="top">
<asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
<asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
TID :
</td>
<td>
abc...
</td>
<td>
Name :
</td>
<td>
xyz ...
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
TextLabelID="lblTop">
</cc1:CollapsiblePanelExtender>
In web config
<system.web>
<pages>
<controls>
<add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
I hope this may helps you. I suggest to first learn AJAX Toolkit and then add to tool box and then try above code.
Another way is using javascript like below:
javascript
<script type="text/javascript">
function funHide() {
document.getElementById('imgShow').style.display = 'block';
document.getElementById('trPOSDETAILS').style.display = 'none';
document.getElementById('imgHide').style.display = 'none';
}
function funShow() {
document.getElementById('imgShow').style.display = 'none';
document.getElementById('trPOSDETAILS').style.display = 'block';
document.getElementById('imgHide').style.display = 'block';
}
</script>
aspx or html
<table width="500px">
<tr>
<td colspan='3'>
POS DETAILS
</td>
<td align="right">
<img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
<img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
</td>
</tr>
<tr id="trPOSDETAILS">
<td>TID :</td>
<td>abc...</td>
<td>Name :</td>
<td>xyz ...</td>
</tr>
</table>
Please mark this answer useful if this solve your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.