Dynamic Number Of Rows Of GridView With Controls

This blog describes how to have a fixed number of rows dynamically in a GridView to edit in ItemTemplate. Sometimes, we need to have a number of rows with controls generated dynamically in WebForm. Here, I am going to describe how to do it in a simple way.

Sometimes, we need to have a number of rows with controls generated dynamically in the WebForm. Here, I am going to describe how to do it in a simple way.

 

Create an empty website. Let's take a WebForm, a textbox, and a button. In the text box, we will fill the desired number of rows of Gridview. And on the click of the button, the Gridview with controls will be shown. Let's take a simple Gridview. In the Gridview ItemTemplate, let's add a few textboxes. Let's take another button at the bottom of the click event which will access the values of controls in Gridview. The code is here.

<asp:Panel ID="PnlOthr" runat="server"> Enter number of other contractors
    <asp:TextBox ID="TxtNo" runat="server" MaxLength="3" />
    <asp:Button ID="BtnAdd" runat="server" Text="Add" OnClick="BtnAdd_Click" />
    <asp:GridView runat="server" ID="gvOthrCntrctr" ShowFooter="true" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                <HeaderTemplate> Sl No. </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblSRNO" runat="server" Text='<%#Container.DataItemIndex+1 %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Other Contractor Name">
                <ItemTemplate>
                    <asp:TextBox ID="TxtOthrCntrctrNm" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator31" runat="server" ErrorMessage="*" ControlToValidate="TxtOthrCntrctrNm" ForeColor="Red" Display="Dynamic" ValidationGroup="y"></asp:RequiredFieldValidator>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Aadhar NO">
                <ItemTemplate>
                    <asp:TextBox ID="TxtAadharNo" runat="server" MaxLength="12" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="PAN NO">
                <ItemTemplate>
                    <asp:TextBox ID="TxtPANNo" runat="server" MaxLength="10" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator336" runat="server" ErrorMessage="*" ControlToValidate="TxtPANNo" ForeColor="Red" Display="Dynamic" ValidationGroup="y"></asp:RequiredFieldValidator>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Other Contractor MobileNo">
                <ItemTemplate>
                    <asp:TextBox ID="TxtOthrCntrctrMobileNo" MaxLength="10" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator32" runat="server" ErrorMessage="*" ControlToValidate="TxtOthrCntrctrMobileNo" ForeColor="Red" Display="Dynamic" ValidationGroup="y"></asp:RequiredFieldValidator>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Other Contractor Emailid">
                <ItemTemplate>
                    <asp:TextBox ID="TxtOthrCntrctrEmailid" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator34" runat="server" ErrorMessage="*" ControlToValidate="TxtOthrCntrctrEmailid" ForeColor="Red" Display="Dynamic" ValidationGroup="y"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Emailid In Correct Format." ValidationGroup="y" ForeColor="Red" ControlToValidate="TxtOthrCntrctrEmailid" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Panel>
<div style="text-align:center;">
    <asp:Button ID="BtnShow" runat="server" Text="Show Gridview Data in Form" OnClick="BtnShow_Click" />
</div>

Now, in the code behind, add the following code.

protected void BtnAdd_Click(object sender, EventArgs e) {
    BindOthrGridview(Convert.ToInt16(TxtNo.Text.Trim()));
}
protected void BindOthrGridview(int rowsno) {
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[5] {
        new DataColumn("ContractorNm"), new DataColumn("ContractorAdhaar"), new DataColumn("ContractorPAN"), new DataColumn("ConractorMObileNo"), new DataColumn("ContractorEmail")
    });
    for (int i = 0; i < rowsno; i++) {
        dt.Rows.Add();
    }
    gvOthrCntrctr.DataSource = dt;
    gvOthrCntrctr.DataBind();
}
protected void BtnShow_Click(object sender, EventArgs e) {
    for (int j = 0; j < gvOthrCntrctr.Rows.Count; j++) {
        TextBox txtCntrctrNmOthr = (TextBox) gvOthrCntrctr.Rows[j].Cells[1].FindControl("TxtOthrCntrctrNm");
        TextBox txtCntrctrAdhrOthr = (TextBox) gvOthrCntrctr.Rows[j].Cells[2].FindControl("TxtAadharNo");
        TextBox txtCntrctrPANOthr = (TextBox) gvOthrCntrctr.Rows[j].Cells[3].FindControl("TxtPANNo");
        TextBox txtCntrctrMobileNo = (TextBox) gvOthrCntrctr.Rows[j].Cells[3].FindControl("TxtOthrCntrctrMobileNo");
        TextBox txtCntrctrEmailId = (TextBox) gvOthrCntrctr.Rows[j].Cells[3].FindControl("TxtOthrCntrctrEmailid");
        Response.Write(txtCntrctrNmOthr.Text + " " + txtCntrctrAdhrOthr.Text.Trim() + " " + txtCntrctrPANOthr.Text + " " + txtCntrctrMobileNo.Text + " " + txtCntrctrEmailId.Text + "<br />");
    }
}

On the click of top button "BtnAdd", after entering the number of Gridview rows in "TxtNo", we get the number of rows in the GridView. On click of the second button "BtnShow", it accesses the data in Gridview controls and shows them on the page. All the code is self explanatory. You can also download the attached solution from the link at the top of this blog.

 

That's all folks. Thank You!