.NET: Show/Hide Row Details in Gridview

Below is the code for the above displated grid

       
<asp:GridView ID="grdUW" runat="server" AutoGenerateColumns="False" CellPadding="5"
Font-Size="12px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" RowStyle-VerticalAlign="Bottom"
 Style="z-index: 100; left: 5px; width: 980px; height: auto;" TabIndex="1">
 <Columns>
<asp:TemplateField>
<EditItemTemplate>
 <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxDone_CheckedChanged"
  Width="15px" />
</EditItemTemplate>
  <ItemTemplate>
  <table style="width: 980px;" border="0">
  <tr>
  <td height="10">
  </td>
  </tr>
  <tr>
  <td width="25" align="center">
  <div class="group" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>' 
  onclick='showhide(<%#String.Format("customer{0}",Container.DataItemIndex) %>,<%#String.Format("order{0}",Container.DataItemIndex) %>)'>
  <asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="images/plus.png" Style="margin-right: 5px;"
  runat="server" />
</div>
 </td>
 <td align="center" width="20">
 <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Checked='<%# Bind("Selected") %>'
  OnCheckedChanged="CheckBoxDone_CheckedChanged" Width="15px" />
 </td>
  <td align="left" width="410" class="user1" style="padding-left:10px;">
  <asp:Label ID="txtCond" runat="server" Text='<%# Bind("CondText") %>'></asp:Label>
  </td>
  <td align="left" width="180" class="user1">
   <asp:Label ID="txtTamt" runat="server" Text='<%# Bind("TAmt") %>'></asp:Label>
   </td>
   <td align="left" width="160" class="user1">
 <asp:Label ID="txtTprem" runat="server" Text='<%# Bind("TPremium") %>'></asp:Label>
 </td>
 <td align="left" class="user1">
 <asp:Label ID="txtExclaim" runat="server" Text='<%# Bind("ExClaim") %>'></asp:Label>
 </td>
 </tr>
 <tr>
 <td colspan="6">
 <asp:HiddenField ID="cnum" runat="server" Value='<%#Eval("CondNo") %>' />
 <asp:HiddenField ID="SpText" runat="server" Value='<%#Eval("SpText") %>' />
 <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("Rate") %>' />
 <asp:HiddenField ID="HiddenField2" runat="server" Value='<%#Eval("Premium") %>' />
 <asp:CheckBox ID="OrgSelected" runat="server" AutoPostBack="true" Checked='<%# Bind("Selected") %>'
 Enabled="false" Visible="false" Width="15px" />
 </td>
 </tr>
 <tr>
 <td height="10">
 </td>
 </tr>
 <tr>
 <td colspan="6">
 <div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order" >
 <table border="0" cellspacing="0" cellpadding="3" style="width: 930px;" id="pnlCondition" runat="server"
 visible="true">
 <tr>
<td align="right" valign="middle" class="fieldtitle">
 
</td>
<td align="left" valign="middle" colspan="5">
 
 </td>
 </tr>
 <tr>
 <td align="right" valign="middle" class="tdPadding">
 <%-- <asp:CheckBox runat="server" ID="Selection" />--%>
 <asp:Label ID="lblCNo" runat="server" Text="Cond No" Font-Bold="True" CssClass="user1"></asp:Label>
 </td>
 <td align="left" valign="middle">
 <asp:TextBox ID="txtCondNo" runat="server" class="input200width" Text='<%# Bind("CondNo") %>'
 Height="15" Style="vertical-align: middle;" Enabled="false"></asp:TextBox>
 </td>
 <td align="right" valign="middle" class="tdPadding">
<asp:Label ID="lblRowCond" runat="server" Text="Condition Text" Font-Bold="True"
CssClass="user1"></asp:Label>
</td>
<td align="left" valign="middle" colspan="3">
<asp:TextBox ID="txtRowCond" runat="server" Font-Bold="True" Height="15" class="input200width"
 Width="452px" Text='<%# Bind("CondText") %>'></asp:TextBox>
</td>
</tr>
<tr class="tableBGcolor1">
<td align="right" valign="middle" class="fieldtitle" width="119">
 
</td>
<td align="left" valign="middle">
 
 </td>
<td align="right" valign="middle" class="fieldtitle" width="130">
 
</td>
<td align="left" valign="middle">
  
</td>
 <td align="right" valign="middle" class="fieldtitle">
 
</td>
 <td align="left" valign="middle">
 
 </td>
</tr>
<tr class="tableBGcolor1">
<td align="right" class="tdPadding" valign="middle" width="119">
<asp:Label ID="lblRowAmt" runat="server" CssClass="user1" Font-Bold="True" Text="Amount"></asp:Label>
</td>
<td align="left" valign="middle">
<asp:TextBox ID="txtRowAmt" runat="server" class="input200width" ReadOnly="false"
Height="15" TabIndex="50" Text='<%# Bind("TAmt") %>' AutoPostBack="True" OnTextChanged="ARP"></asp:TextBox>
 </td>
 <td align="right" class="tdPadding" valign="middle" width="130">
<asp:Label ID="lblRowRate" runat="server" CssClass="user1" Font-Bold="True" Text="Rate"></asp:Label>
</td>
<td align="left" valign="middle">
 <asp:TextBox ID="txtRowRate" runat="server" Height="15" class="input200width" TabIndex="51"
 Text='<%# Bind("Rate") %>' AutoPostBack="True" OnTextChanged="ARP"></asp:TextBox>
</td>
 <td align="right" class="tdPadding" valign="middle">
  <asp:Label ID="lblRowPremium" runat="server" CssClass="user1" Font-Bold="True" Text="Premium"></asp:Label>
</td>
<td align="left" valign="middle">
<asp:TextBox ID="txtRowPremium" runat="server" Height="15" class="input200width"
TabIndex="52" Text='<%# Bind("TPremium") %>' AutoPostBack="True" OnTextChanged="ARP"></asp:TextBox>
</td>
</tr>
<tr class="tableBGcolor1">
  <td align="right" class="fieldtitle" valign="middle" width="119">
  
</td>
<td align="left" valign="middle">
 
</td>
<td align="right" class="fieldtitle" valign="middle" width="130">
 
</td>
<td align="left" valign="middle">
 
</td>
<td align="right" class="fieldtitle" valign="middle">
 
</td>
<td align="left" valign="middle">
 
</td>
</tr>
<tr class="tableBGcolor2">
<td align="right" valign="middle" class="tdPadding">
 <asp:Label ID="lblRowSpTxt" runat="server" Text="Special Text" Font-Bold="True" CssClass="user1"></asp:Label>
</td>
<td align="left" valign="middle" colspan="3">
<asp:TextBox ID="txtRowSpTxt" runat="server" Width="510" Height="15" class="input200width"
          CssClass="input200width" Text='<%# Bind("SpText") %>'></asp:TextBox>
 </td>
<td align="right" valign="middle" class="tdPadding">
<asp:Label ID="lblexclaim" runat="server" Font-Bold="True" Text="Excess" CssClass="user1"></asp:Label>
 </td>
<td align="left" valign="middle" class="fieldtitle">
<table style="width: 100%;">
 <tr>
<td width="100">
<asp:TextBox ID="exclaim" runat="server" class="input200width" Text='<%# Bind("ExClaim") %>'
Width="60" Height="15"></asp:TextBox>
 </td>
<td>
 <asp:Button ID="btnSelect" runat="server" Text="Update" CssClass="fsSubmitButton1" Height="25" CommandName="update" CommandArgument='<%# CType(Container,GridViewRow).RowIndex %>'/>
 </td>
</tr>
</table>
</td>
 </tr>
 <tr class="tableBGcolor2">
<td align="right" class="fieldtitle" valign="middle">
 
</td>
<td align="left" valign="middle">
 
</td>
<td align="right" class="fieldtitle" valign="middle">
 
</td>
<td align="left" valign="middle">
 
</td>
<td align="right" class="fieldtitle" valign="middle">
 
</td>
<td align="left" valign="middle">
 
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderTemplate>
<table style="width: 980px;" border="0">
<tr style="background-color: #A29062;">
<td width="25">
</td>
 <td height="30" align="center" width="20">
</td>
<td align="left" width="410" class="user2" style="padding-left:10px;">
Conditions
</td>
<td align="left" width="180" class="user2">
Limit
</td>
<td align="left" width="160" class="user2">
Current Premium
</td>
<td align="left" class="user2">
Excess
</td>
</tr>
</table>
</HeaderTemplate>
<HeaderStyle BorderStyle="None" />
<ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" CssClass="tBorder1" />
</asp:TemplateField>
</Columns>
<%-- <FooterStyle BackColor="#779CCA" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#D2D3D5" Height="50" BorderStyle="None" />--%>
<EditRowStyle BackColor="#779CCA" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#779CCA" ForeColor="White" HorizontalAlign="Center" />
<%--<HeaderStyle BackColor="#A29062" Font-Bold="True" ForeColor="White" Height="50px"
CssClass="user2" />--%>
<%--<AlternatingRowStyle BackColor="#D2D3D5" />--%>
</asp:GridView>

And the script is below

<script type="text/javascript">

        function showhide(master, detail) {
           
            var src = $(master).children()[0].src;

            if (src.endsWith("plus.png"))
                src = src.replace('plus.png', 'minus.png');
            else
                src = src.replace('minus.png', 'plus.png');


            $(master).children()[0].src = src;


            $(detail).slideToggle("normal");
        }
    </script>

.NET

Monday, October 21, 2013

Show/Hide Row Details in Gridview

No comments: