How to show table dynamically related to value entered in textbox

**adriancs** · Dec 23 '15, 11:32 AM

Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        table{
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <asp:Panel ID="Panel1" runat="server">
            Number of Records <asp:TextBox runat="server" ID="txtNoRecords" Text="5"></asp:TextBox>
            <asp:Button ID="btGetRow" runat="server" Text="Get Rows" OnClick="btGetRow_Click" />
            <br />
            <br />
            <asp:Button ID="btSave" runat="server" Text="Save Data" OnClick="btSave_Click" />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="ID" />
                    <asp:TemplateField HeaderText="First Name">
                        <ItemTemplate>
                            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Last Name">
                        <ItemTemplate>
                            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Go To School">
                        <ItemTemplate>
                            <asp:DropDownList runat="server" ID="dropGoToSchool">
                                <asp:ListItem Value="Yes">Yes</asp:ListItem>
                                <asp:ListItem Value="No">No</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="School Name">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="txtSchoolName"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Grade">
                        <ItemTemplate>
                            <asp:DropDownList ID="dropGrade" runat="server">
                                <asp:ListItem>1st Grade</asp:ListItem>
                                <asp:ListItem>2nd Grade</asp:ListItem>
                                <asp:ListItem>3rd Grade</asp:ListItem>
                                <asp:ListItem>4th Grade</asp:ListItem> 
                                <asp:ListItem>5th Grade</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </asp:Panel>

        <asp:Panel ID="Panel2" runat="server" Visible="false">
            Result:
            <asp:GridView ID="GridView2" runat="server"></asp:GridView>
        </asp:Panel>
        
    </form>
</body>
</html>

Code Behind:

Code:

public partial class WebForm1 : System.Web.UI.Page
{
    DataTable dt
    {
        get
        {
            return (DataTable)ViewState["dt"];
        }
        set
        {
            ViewState["dt"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    void CreateTable()
    {
        if (dt == null)
        {
            dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("First Name");
            dt.Columns.Add("Last Name");
            dt.Columns.Add("Go To School");
            dt.Columns.Add("School Name");
            dt.Columns.Add("Grade");
        }
    }

    void LoadForm()
    {
        GridView1.DataSource = dt;
        GridView1.DataBind();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            GridViewRow gr = GridView1.Rows[i];
            DataRow dr = dt.Rows[i];
            ((TextBox)gr.FindControl("txtFirstName")).Text = dr["First Name"] + "";
            ((TextBox)gr.FindControl("txtLastName")).Text = dr["Last Name"] + "";
            ((DropDownList)gr.FindControl("dropGoToSchool")).SelectedValue = dr["Go To School"] + "";
            ((TextBox)gr.FindControl("txtSchoolName")).Text = dr["School Name"] + "";
            ((DropDownList)gr.FindControl("dropGrade")).SelectedValue = dr["Grade"] + "";
        }
    }

    void GenerateResult()
    {
        GridView2.DataSource = dt;
        GridView2.DataBind();
    }

    protected void btGetRow_Click(object sender, EventArgs e)
    {
        CreateTable();

        int totalRows = 0;
        int.TryParse(txtNoRecords.Text, out totalRows);
        txtNoRecords.Text = totalRows.ToString();

        while (dt.Rows.Count < totalRows)
        {
            DataRow dr = dt.NewRow();
            dt.Rows.Add(dr);
        }

        while (dt.Rows.Count > totalRows)
        {
            dt.Rows.RemoveAt(dt.Rows.Count - 1);
        }

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            dt.Rows[i]["ID"] = (i + 1).ToString();
        }

        LoadForm();

        GenerateResult();
    }

    protected void btSave_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            GridViewRow gr = GridView1.Rows[i];
            DataRow dr = dt.Rows[i];
            dr["First Name"] = ((TextBox)gr.FindControl("txtFirstName")).Text;
            dr["Last Name"] = ((TextBox)gr.FindControl("txtLastName")).Text;
            dr["Go To School"] = ((DropDownList)gr.FindControl("dropGoToSchool")).SelectedValue;
            dr["School Name"] = ((TextBox)gr.FindControl("txtSchoolName")).Text;
            dr["Grade"] = ((DropDownList)gr.FindControl("dropGrade")).SelectedValue;
        }

        GenerateResult();

        Panel1.Visible = false;
        Panel2.Visible = true;
    }
}

How to show table dynamically related to value entered in textbox

How to show table dynamically related to value entered in textbox

Comment