title: How to implement row collapse/expand in Grid?
body: <p>I'm working on application develop using ASP.NET C#, I wanted to implement row collapse/expand when click on "<strong>--</strong>" and "<strong>+</strong>" image onTelerik RadGrid, the purpose is to show latest version of data, and then hide older version of identical data rows, older version of data rows is show only upon click on the "<strong>+</strong>" image.</p>
  
  <p>The output of the Grid will be like the image below:</p>
  
  <p><img src="https://i.stack.imgur.com/DDsSK.jpg" alt="enter image description here"></p>
  
  <p>Here my data source query from DB and bind directly to the Grid, my objective is to hide the row highlighted in yellow and append "<strong>+</strong>" or "<strong>--</strong>" image on the latest data row.</p>
  
  <p><img src="https://i.stack.imgur.com/yShoi.jpg" alt="enter image description here"></p>
  
  <p>The idea is using JavaScript/jQuery to hide DBRow > 1, which DBRow  column will be hide in the Grid, and DBRow will act as an indicator for JavaScript to select the Element to hide it.</p>
  
  <pre><code>&lt;telerik:RadGrid runat="server" ID="gvID" ShowHeader="true" Width="1000px" &gt;
  &lt;mastertableview autogeneratecolumns="false" showheaderswhennorecords="true"&gt;
  &lt;Columns&gt;
      &lt;telerik:GridBoundColumn DataField="DBName" HeaderText="Name"&gt;
      &lt;/telerik:GridBoundColumn&gt;
  
      &lt;telerik:GridBoundColumn DataField="DBVersion" HeaderText="Version"&gt;
      &lt;/telerik:GridBoundColumn&gt;
  
      &lt;telerik:GridBoundColumn DataField="DBRow" HeaderText="DBRow" ReadOnly="true"&gt;
          &lt;HeaderStyle CssClass="hiddenColumn" /&gt;
          &lt;ItemStyle CssClass="hiddenColumn" /&gt;
      &lt;/telerik:GridBoundColumn&gt;
  
      &lt;telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" /&gt;
  &lt;/Columns&gt;
  &lt;/mastertableview&gt;
  </code></pre>
  
  <p></p>
  
  <p>My question is how can I append the "<strong>+</strong>" and "<strong>--</strong>" into the correct row, and hide the row which DBRow > 1? </p>
  
  <p>If you have better approach do share with me.
  Thank you</p>
  
  <p><strong>Updated</strong></p>
  
  <p>Below is the generated HTML:</p>
  
  <pre><code>&lt;div id="gvID" class="RadGrid RadGrid_Default" style="width: 1000px;"&gt;
      &lt;table class="rgMasterTable" border="0" id="gvID_ctl00" style="width: 100%;
          table-layout: auto; empty-cells: show;"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th scope="col" class="rgHeader" style="white-space: nowrap;"&gt;
                      Name
                  &lt;/th&gt;
                  &lt;th scope="col" class="rgHeader"&gt;
                      Version
                  &lt;/th&gt;
                  &lt;th scope="col" class="hiddenColumn rgHeader"&gt;
                      DBRow
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr class="rgRow" id="gvID_ctl00__0"&gt;
                  &lt;td&gt;
                      A
                  &lt;/td&gt;
                  &lt;td&gt;
                      Ver.0
                  &lt;/td&gt;
                  &lt;td class="hiddenColumn"&gt;
                     1
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="rgAltRow" id="gvID_ctl00__1"&gt;
                  &lt;td&gt;
                      B
                  &lt;/td&gt;
                  &lt;td&gt;
                      Ver.1
                  &lt;/td&gt;
                  &lt;td class="hiddenColumn"&gt;
                     1
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="rgRow" id="gvID_ctl00__2"&gt;
                  &lt;td&gt;
                      B
                  &lt;/td&gt;
                  &lt;td&gt;
                      Ver.0
                  &lt;/td&gt;
                  &lt;td class="hiddenColumn"&gt;
                     2
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="rgRow" id="gvID_ctl00__3"&gt;
                  &lt;td&gt;
                      C
                  &lt;/td&gt;
                  &lt;td&gt;
                      Ver.1
                  &lt;/td&gt;
                  &lt;td class="hiddenColumn"&gt;
                     1
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="rgRow" id="gvID_ctl00__4"&gt;
                  &lt;td&gt;
                      C
                  &lt;/td&gt;
                  &lt;td&gt;
                      Ver.0
                  &lt;/td&gt;
                  &lt;td class="hiddenColumn"&gt;
                     2
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;input id="gvID_ClientState" name="gvID_ClientState" type="hidden" /&gt;
  &lt;/div&gt;
  </code></pre>