locked
How to generate dynamic textbox in gridview RRS feed

  • Question

  • User-1024101449 posted

    I have below 

    I have below data table. 

    I want to generate text box right from subj1 to subjxx automatically in gridview.

    Main thing is, I want to bind  (SlNo,Name and Dept) data along with subj1 to subjxx as textbox.

    How to do this in vb.net...?

    Datatable(Dt1)									
    									
    S.No	Name	Dept	subj1	subj2	subj3	subj4	subj5	…..	…..
    1	101	A1	textbox	textbox	textbox	textbox	textbox		
    2	102	B1	textbox	textbox	textbox	textbox	textbox		
    3	103	C1	textbox	textbox	textbox	textbox	textbox		
    …	….	….	…	…	…	…	…	…	…
    

    DataTable

    Friday, July 19, 2019 9:23 AM

Answers

  • User839733648 posted

    Hi gani7787,

    You may bind the value using GridViewTemplate() event like below:

           protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    ...
                    for (int i = 0; i < 5; i++)
                    {
                        TemplateField field = new TemplateField();
                        field.HeaderText = "subj" + i.ToString();
                        field.ItemTemplate = new GridViewTemplate("Column" + i.ToString(), i.ToString());
                        GridView1.Columns.Add(field);
                    }
    
                }
                ...
            }
    
            ...
    
            public class GridViewTemplate : ITemplate
            {
                private string columnNameBinding;
                private string columnname;
    
                public GridViewTemplate(string colname, string colNameBinding)
                {
                    columnNameBinding = colNameBinding;
                    columnname = colname;
                }
    
                public void InstantiateIn(System.Web.UI.Control container) 
                {
                    TextBox tb = new TextBox();
                    tb.ID = "txtDynamic" + columnNameBinding;
                    tb.Text = columnname;//here to set the value of textbox
                    container.Controls.Add(tb);
                }
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 23, 2019 7:22 AM

All replies

  • User-1038772411 posted

    Hello, Gani7787

    Why not do it in design time with ItemTemplate

    <asp:GridView ID="GrdDynamic" runat="server">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="Name" Text='<%#Eval("Name") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

    Want to go with reference link please follow below link :

    https://stackoverflow.com/questions/10527859/how-to-add-dynamic-texbox-in-gridview-at-runtime

    Thanks.

    Friday, July 19, 2019 10:13 AM
  • User-1024101449 posted

    Thanks for your quick reply..

    Sl.No, Name and dept is fixed columns.

    Only thing is, subject will have multiple columns and values. sometimes subject column may increase/decrease. So, i want to generate subject values only using text box.

    if i use item template in design, again it is static only.i don't want this.

    i want the fields (subj1, subj2,subjs3,etc..must be dynamic text boxes both rows and columns based on my slno,name,dept binded).

    I'm struggling to handle how to handle this in databound event or some other events...?

    Friday, July 19, 2019 10:25 AM
  • User-1024101449 posted

    pls. can any one can tell me the logic,how we could proceed further...

    This is urgent...

    Monday, July 22, 2019 1:04 AM
  • User839733648 posted

    Hi gani7787,

    According to your description, I suggest that you may create a class implementing ITemplate.

    In my opinion, adding a different number of textboxes to different rows is a bit out of the logic in the gridview.

    If you want to add dynamic columns, the common way is to find out how to add templete fields dynamically.

    Here is my testing code and hope it will be helpful to you.

    .aspx

        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            </asp:GridView>
        </form>

    code-behind.

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                If Not Me.IsPostBack Then
                    Dim bfield As BoundField = New BoundField()
                    bfield.HeaderText = "S.No"
                    bfield.DataField = "S.No"
                    GridView1.Columns.Add(bfield)
                    bfield = New BoundField()
                    bfield.HeaderText = "Name"
                    bfield.DataField = "Name"
                    GridView1.Columns.Add(bfield)
                    bfield = New BoundField()
                    bfield.HeaderText = "Dept"
                    bfield.DataField = "Dept"
                    GridView1.Columns.Add(bfield)
    
                    For i As Integer = 0 To 5 - 1
                        Dim field As TemplateField = New TemplateField()
                        field.HeaderText = "subj" & i.ToString()
                        field.ItemTemplate = New GridViewTemplate("Column" & i.ToString(), i.ToString())
                        GridView1.Columns.Add(field)
                    Next
                End If
    
                Me.BindGrid()
            End Sub
    
            Private Sub BindGrid()
                Dim dt As DataTable = New DataTable()
                dt.Columns.AddRange(New DataColumn(2) {New DataColumn("S.No", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Dept", GetType(String))})
                dt.Rows.Add(1, "101", "A1")
                dt.Rows.Add(2, "102", "B1")
                dt.Rows.Add(3, "103", "C1")
                GridView1.DataSource = dt
                GridView1.DataBind()
            End Sub
    
            Public Class GridViewTemplate
                Implements ITemplate
    
                Private columnNameBinding As String
    
                Public Sub New(ByVal colname As String, ByVal colNameBinding As String)
                    columnNameBinding = colNameBinding
                End Sub
    
                Public Sub InstantiateIn(ByVal container As System.Web.UI.Control)
                    Dim tb As TextBox = New TextBox()
                    tb.ID = "txtDynamic" & columnNameBinding
                    container.Controls.Add(tb)
                End Sub
            End Class

    result:

    References:

    https://www.codeproject.com/Articles/17078/Dynamically-Adding-Template-Columns-to-a-GridView

    https://stackoverflow.com/questions/23592785/add-columns-dynamically-to-grid-view-with-itemtemplate

    https://forums.asp.net/t/1001702.aspx

    Best Regards,

    Jenifer

    Monday, July 22, 2019 6:35 AM
  • User-1024101449 posted

    Thanks for your help. Your code really awesome.

    I am getting below error  when implements ITemplate ==> Error : class 'GridviewTemplate' must implement 'Sub InstantiateIn(container as Control)' for interface 'Systems.Web.UI.ITemplatre'

    Error Line ==>  field.ItemTemplate = New GridViewTemplate("Column" & i.ToString(), i.ToString())

    if this is ok, then my problem solved...

    Monday, July 22, 2019 9:03 AM
  • User839733648 posted

    Hi gani7787,

    You may modify that part of codes as below.

        Public Class GridViewTemplate
            Implements ITemplate
    
            Private columnNameBinding As String
    
            Public Sub New(ByVal colname As String, ByVal colNameBinding As String)
                columnNameBinding = colNameBinding
            End Sub
    
            Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn
                Dim tb As TextBox = New TextBox()
                tb.ID = "txtDynamic" & columnNameBinding
                container.Controls.Add(tb)
            End Sub
        End Class

    Best Regards,

    Jenifer

    Monday, July 22, 2019 9:35 AM
  • User-1024101449 posted

    Thanks..You rocking...

    Is it possible to bind values in the text box..?

    For example, i have some values in subject which is stored in the background. 

    while loading, shall i fetch and bind in the gridview textbox...?

    Monday, July 22, 2019 10:44 AM
  • User-1024101449 posted

    Hi Jenifer,

    Can you reply for my question...?

    Monday, July 22, 2019 11:38 AM
  • User-1024101449 posted

    can you help us pls..?

    Tuesday, July 23, 2019 12:45 AM
  • User839733648 posted

    Hi gani7787,

    You may bind the value using GridViewTemplate() event like below:

           protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    ...
                    for (int i = 0; i < 5; i++)
                    {
                        TemplateField field = new TemplateField();
                        field.HeaderText = "subj" + i.ToString();
                        field.ItemTemplate = new GridViewTemplate("Column" + i.ToString(), i.ToString());
                        GridView1.Columns.Add(field);
                    }
    
                }
                ...
            }
    
            ...
    
            public class GridViewTemplate : ITemplate
            {
                private string columnNameBinding;
                private string columnname;
    
                public GridViewTemplate(string colname, string colNameBinding)
                {
                    columnNameBinding = colNameBinding;
                    columnname = colname;
                }
    
                public void InstantiateIn(System.Web.UI.Control container) 
                {
                    TextBox tb = new TextBox();
                    tb.ID = "txtDynamic" + columnNameBinding;
                    tb.Text = columnname;//here to set the value of textbox
                    container.Controls.Add(tb);
                }
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 23, 2019 7:22 AM
  • User-1024101449 posted

    Yes. you are correct.

    But, my sql table values some times may have empty cell also like below. (click below sample SQL Table values link). 

    Sample SQL table values

    In this case how we could handle...?

    Note : Anyhow all the cells should display as textbox. this is perfect now. But, binding data display only where ever is binded.

    Tuesday, July 23, 2019 9:01 AM
  • User839733648 posted

    Hi gani7787,

    I'd like to ask that how the format of the data you have query from your database is.

    You just have to read the datas and show those in the table.

    Besides, about your requirment, I think that it is easier to bind the datas to the gridview using in Row Data Bound Event.

    Best Regards,

    Jenifer

    Thursday, July 25, 2019 8:41 AM
  • User-1024101449 posted

    Yes. we use Row Data Bound.

    But, my requirement is little bit tricky.

    For dynamic column, From column 4 to end i have been using one dataset-1. for example. i have 10 columns in the grid which includes dynamic column.

    for the data, from 4th column to end i am using dataset-2 for data counting. This also have 10 columns. 

    So, the first 3 columns in both dataset is fixed.  i want data bound from 4th column of every cell in dataset-2. 

    the final assumption is, gridview bound and populated dynamic textboxes using both dataset-1 & dataset-2

    forming the logic getting problem...?

    Note : till now dynamic generation of textbox is fine. only missing and struggle is to bound the data from other dataset.

    Thursday, July 25, 2019 9:09 AM