Question: I have an asp.net gridview which displays two rows for each record, using the following code below (example).

However using a dropdownlist which is on the top of the page, based on its selection (1 or 2) I want the gridview to update itself on the following way:

option 1 = display two rows per record.

option 2 = display only one row per record (second table row shown on code below I don't want it to be shown when Option 2 is selected.

UPDATE:
Selecting the dropdownlist option and making it work is fine, I don't have a problem there, but I need to know how to manipulate the gridview to display one or two rows per record. So basically how can I (with code) change the format of the gridview from 1 to 2 rows.
Obviously there is the option of using two gridviews and show the one needed based on your selection, but I prefer to use one gridview only (if that's possible).

```
 <HeaderTemplate>
           <asp:LinkButton ID="lbPN" runat="server" Text="Project Name" style "color:white;" CommandName="Sort" CommandArgument="PN"  tabindex="1000" ></asp:LinkButton><br />
           <asp:TextBox runat="server" ID="S_PN" CssClass="FilterField" ></asp:TextBox>
  </HeaderTemplate>
  <ItemTemplate>
           <table  >
              <tr>
                 <td class="STD_normal" style="width:150px; font-weight:bold"><%#Eval("PN")%>
                    </td>                                                    
              </tr>
              <tr>
                 <td class="STD_Normal_Grey" style="width:150px"><%#Eval("DD", "{0:dd-MMM-yyyy}")%> </td>
              </tr>
          </table>                                              
       </ItemTemplate>                                                              
      <HeaderStyle HorizontalAlign="Left"/>
      </asp:TemplateField>

```

Answer: 
**Client Side**

One way would be to use JavaScript or jQuery to show/hide the second row. For this, I recommend replacing the table with `<div>`'s and adding the class to the `div` tag instead of the `td` tag, or splitting out the tables, as shown in the Server Side example.

Here's a jQuery example:

```
$("#ddl").change(function() {
    if($('#ddl option:selected').val() == 1) {
        $('STD_Normal_Grey').show();
    } else {
        $('STD_Normal_Grey').hide();
    }
}

```

**Server Side**

Here's another example showing a server side option, as well as how you might be able to split out the tables to make controlling the display a bit easier:

```
<table>
    <tr>
        <td class="STD_normal" style="width:150px; font-weight:bold">  
            <%#Eval("PN")%>
        </td>                                                    
     </tr>
 </table>
 <table style="display:<%# DdlVal == "1" ? "inline-block" : "none" %>;">
     <tr>
         <td class="STD_Normal_Grey" style="width:150px">
             <%#Eval("DD", "{0:dd-MMM-yyyy}")%>
         </td>
     </tr>
 </table> 

```

Then, in your code behind:

```
protected string DdlVal
{
    get { return ddl.SelectedValue; }
}

```

This would require the DropDownList to post back, whereas the Client Side solution would not, making the Client Side solution much faster.
with a dropdownlist you could use the OnSelectedIndexChanged function. like this:

```html
<asp:DropDownList runat="server" ID="ddlDemo" on SelectedIndexChanged="ddlDemo_SelectedIndexChanged">
<asp:ListItem Value="1">one</asp:ListItem><asp:ListItem Value="2">tow</asp:ListItem>
    </asp:DropDownList>
```

and in the code you could play with it:

```html
    Protected Sub ddlDemo_SelectedIndexChanged(sender As Object, e As EventArgs)

        Dim selectedValue As Integer = ddlDemo.SelectedValue

        If ddlDemo.SelectedValue = 1 Then

            ' do something

        End If

    End Sub
```