Adding Dynamic Rows in GridView with DropDownList and TextBox in ASP.Net

Hi lokendrasiriy,

Refer below example.

You need to add a TextBox and hide on page load. Then loop through each row and check the DropDownList value and show hide the TextBox based on condition.

Then same checking need to be checked on DorpDownList change event using jQuery.

HTML

<asp:GridView ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" ItemStyle-VerticalAlign="Top" />
        <asp:TemplateField HeaderText="Header 1" ItemStyle-VerticalAlign="Top">
            <ItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" Width="100px" AppendDataBoundItems="true">
                    <asp:ListItem Value="-1">Select</asp:ListItem>
                </asp:DropDownList>
                <div id="dvContents" style="display: none;">
                    <asp:TextBox ID="TextBox1" runat="server" Width="100px" />
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header 2" ItemStyle-VerticalAlign="Top">
            <ItemTemplate>
                <asp:DropDownList ID="DropDownList2" runat="server" Width="100px" AppendDataBoundItems="true">
                    <asp:ListItem Value="-1">Select</asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
                <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=DropDownList1]').change(function () {
            if ($(this).find('option:selected').text() == "Others") {
                $(this).closest('tr').find('[id*=dvContents]').show();
            } else {
                $(this).closest('tr').find('[id*=dvContents]').hide();
            }
        });

        $('[id*=Gridview1] tr:has(td)').each(function () {
            var tr = $(this).closest('tr');
            if ($(tr).find('[id*=DropDownList1] option:selected').text() == "Others") {
                $(tr).find('[id*=dvContents]').show();
            }
        });
    });
</script>

Namespaces

C#

using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        SetInitialRow();
    }
}

protected void ButtonAdd_Click(object sender, EventArgs e)
{
    AddNewRowToGrid();
}

private ArrayList GetDummyData()
{
    ArrayList arr = new ArrayList();
    arr.Add(new ListItem("Item1", "1"));
    arr.Add(new ListItem("Item2", "2"));
    arr.Add(new ListItem("Item3", "3"));
    arr.Add(new ListItem("Item4", "4"));
    arr.Add(new ListItem("Item5", "5"));
    arr.Add(new ListItem("Others", "6"));
    return arr;
}

private void FillDropDownList(DropDownList ddl)
{
    ArrayList arr = GetDummyData();
    foreach (ListItem item in arr)
    {
        ddl.Items.Add(item);
    }
}

private void SetInitialRow()
{
    DataTable dt = new DataTable();
    DataRow dr = null;

    //Define the Columns
    dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
    dt.Columns.Add(new DataColumn("Column1", typeof(string)));
    dt.Columns.Add(new DataColumn("Column2", typeof(string)));

    //Add a Dummy Data on Initial Load
    dr = dt.NewRow();
    dr["RowNumber"] = 1;
    dt.Rows.Add(dr);

    //Store the DataTable in ViewState
    ViewState["CurrentTable"] = dt;
    //Bind the DataTable to the Grid
    Gridview1.DataSource = dt;
    Gridview1.DataBind();

    //Extract and Fill the DropDownList with Data
    DropDownList ddl1 = (DropDownList)Gridview1.Rows[0].Cells[1].FindControl("DropDownList1");
    DropDownList ddl2 = (DropDownList)Gridview1.Rows[0].Cells[2].FindControl("DropDownList2");
    FillDropDownList(ddl1);
    FillDropDownList(ddl2);
}

private void AddNewRowToGrid()
{
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
        DataRow drCurrentRow = null;

        if (dtCurrentTable.Rows.Count > 0)
        {
            drCurrentRow = dtCurrentTable.NewRow();
            drCurrentRow["RowNumber"] = dtCurrentTable.Rows.Count + 1;
            //add new row to DataTable
            dtCurrentTable.Rows.Add(drCurrentRow);
            //Store the current data to ViewState
            ViewState["CurrentTable"] = dtCurrentTable;

            for (int i = 0; i < dtCurrentTable.Rows.Count - 1; i++)
            {
                //extract the DropDownList Selected Items
                DropDownList ddl1 = (DropDownList)Gridview1.Rows[i].Cells[1].FindControl("DropDownList1");
                DropDownList ddl2 = (DropDownList)Gridview1.Rows[i].Cells[2].FindControl("DropDownList2");

                // Update the DataRow with the DDL Selected Items
                dtCurrentTable.Rows[i]["Column1"] = ddl1.SelectedItem.Text;
                dtCurrentTable.Rows[i]["Column2"] = ddl2.SelectedItem.Text;

            }

            //Rebind the Grid with the current data
            Gridview1.DataSource = dtCurrentTable;
            Gridview1.DataBind();
        }
    }
    else
    {
        Response.Write("ViewState is null");
    }

    //Set Previous Data on Postbacks
    SetPreviousData();
}

private void SetPreviousData()
{
    int rowIndex = 0;
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                //Set the Previous Selected Items on Each DropDownList on Postbacks
                DropDownList ddl1 = (DropDownList)Gridview1.Rows[rowIndex].Cells[1].FindControl("DropDownList1");
                DropDownList ddl2 = (DropDownList)Gridview1.Rows[rowIndex].Cells[2].FindControl("DropDownList2");

                //Fill the DropDownList with Data
                FillDropDownList(ddl1);

                if (i < dt.Rows.Count - 1)
                {
                    ddl1.ClearSelection();
                    ddl1.Items.FindByText(dt.Rows[i]["Column1"].ToString()).Selected = true;

                    ddl2.ClearSelection();
                    ddl2.Items.FindByText(dt.Rows[i]["Column2"].ToString()).Selected = true;
                }

                rowIndex++;
            }
        }
    }
}

Screenshot