Clever Geek Handbook

Adding dynamic panel / controls

I have the following table

<td class="style2">
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>Location</asp:ListItem>
        <asp:ListItem>Name</asp:ListItem>
        <asp:ListItem>SSN</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem>LIKE</asp:ListItem>
        <asp:ListItem>=</asp:ListItem>
    </asp:DropDownList>
    <br />
    <br />
</td>
<td valign="bottom">
   <asp:Button ID="btnAdd" runat="server" Text="Add" />
</td>

When btnAdd is clicked, I want to add another row of these filters. I assume I am creating a panel and you have these 3 controls and the add button will create a new panel or I will create all the controls on the fly and then add them with code.

Edit :: When I click on btnAdd I want to add another line as such

Before btnAdd Click

<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />

    </td>

After btnAdd:

<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
    </td>

<tr>
<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
    </td>
</tr>
+1


source to share


2 answers


It would be easier to show / hide the third dropdown rather than add it dynamically.

DropDownList3.Visible = true;


When you add dynamically, you get problems with the view in the view, if you don't add it at the right time (page lifecycle), it's not worth the hassle if you can avoid it.

If you need me to make your line in a custom control and keep adding new instances. reload viewstate occurs after init and after load, so make sure your control is loaded in init ideally on all postbacks.

0


source


You can do something in the code behind which your dropdowns are visible. In other words:

<td class="style2">
    <asp:DropDownList ID="DropDownList3" runat="server" Visible="false">
        <asp:ListItem>Location</asp:ListItem>
        <asp:ListItem>Name</asp:ListItem>
        <asp:ListItem>SSN</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList4" runat="server" Visible="false">
        <asp:ListItem>LIKE</asp:ListItem>
        <asp:ListItem>=</asp:ListItem>
    </asp:DropDownList>

And your code behind will have this in the button_OnClick event:



DropDownList3.Visible = true;
DropDownList4.Visilbe = true;

And of course, if you do this in a refreshed panel, it makes the transition more enjoyable than refreshing the entire page.

0


source






More articles:


All Articles