asked on

Generate 4 textboxes in a row

I need a C# asp code that would add 4 textboxes next to each other in a row when the "Create Additional Space" button is clicked. Then if the user clicks it again, it would add another row of 4 textboxes below the previous one....

kaufmed

It would be super easy to generate the row by simply wrapping the 4 TBs with a <div>. You haven't really specified your architecture, so I'm going to assume you are using WebForms. Something like this should do the trick:

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_27864391._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:PlaceHolder ID="container" runat="server"></asp:PlaceHolder>
    <asp:Button ID="btnMoreSpace" runat="server" Text="Create Additional Space" 
        OnClick="btnMoreSpace_Click" />
</asp:Content>

Open in new window

Default.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace _27864391
{
    public partial class _Default : Page
    {
        protected override void OnInit(EventArgs e)
        {
            if (Session["clickCount"] == null)
            {
                Session["clickCount"] = 1;
            }

            if (IsPostBack)
            {
                for (int i = 0; i < (int)Session["clickCount"]; i++)
                {
                    HtmlGenericControl div = new HtmlGenericControl("div");

                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());

                    this.container.Controls.Add(div);
                }
            }

            base.OnInit(e);
        }

        protected void btnMoreSpace_Click(object sender, EventArgs e)
        {
            Session["clickCount"] = ((int)Session["clickCount"]) + 1;
        }
    }
}

Open in new window

Yields:

kaufmed

P.S.

Note that the for loop is required in order to preserve the previously added dynamic TBs.

Dynamic controls must be added prior to the ViewState being loaded if you want them to preserve any values that were contained within them. This is why I put the creation and addition of the TBs in the overridden OnInit method. This is also why I kept track of the number of times the button was clicked within the Session object.

pauledwardian

ASKER

Thank you! how can I change the 4th textbox property to multi line ? And how can I make the textboxes bigger? Also, I need to include this into a table format since users will put the information in and print it so there will be some borders, etc. FYI: nothing is comming from the database. Its more like something to type on the web and print it.

YZlat

tb.TextMode = TextBoxMode.MultiLine;
tb.Height = 30;
tb.Width = 150;

Obadiah Christopher

<div>
<asp:GridView ID="gvTextBox" runat="server" AutoGenerateColumns="false" ShowHeader="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt1" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt2" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt3" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt4" runat="server" Width="100px" TextMode="MultiLine"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</div>
<div>
<asp:Button ID="btnAddRows" runat="server" Text="Add Rows" 
            onclick="btnAddRows_Click" />
</div>

Open in new window

        protected void btnAddRows_Click(object sender, EventArgs e)
        {
DataTable dtText;
            if (Session["dt"] == null)
                dtText = new DataTable();
            else
                dtText = (DataTable)Session["dt"];

            DataRow dr;

            dr = dtText.NewRow();
            dtText.Rows.Add(dr);

            gvTextBox.DataSource = dtText;
            gvTextBox.DataBind();
        }

Open in new window

ASKER CERTIFIED SOLUTION

kaufmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pauledwardian

ASKER

Thanks!