Dynamically creation of rows using Datagrid

• Download Dynamic_Creation_of_Controls_using_Datagrid - 25.05 KB

Introduction

This article describes how to use data-grid as an data entry object rather than just considering it as an reporting tool.

Background

In ASP.Net we frequently create dynamic controls (rows) using ASP.Net Web Control table. The major reason behind it is the ease of creation. Most of the times the developers prefer the “System.Web.UI.WebControls.Table” over datagrid because it is analogous to the HTML table. In our project we opted for another approach, we tried to use data-grid. After implementing the solution using Datagrid we felt it is not only simpler to implement but also alignment and most of the UI features are automatically handled.

In our project we had to generate the rows on click of “Add” button and had to delete that particular row on click of “Delete” row button.

Using the code

1. Creating the skeleton of the controls needed in datagrid

We first need to create the structure/skeleton for the controls. On click of “Add” button the controls would be created and displayed in the datagrid. You can create the framework in the design view itself; however experienced programmers would prefer creating it in the “HTML” view.

You can add “ASP Validators” within the “<itemtemplate>” incase you wish to perform any validations over the data entered by the user.

<DIV><asp:datagrid id="dgARecord" runat="server" Width="100%" CellPadding="2" 
				AutoGenerateColumns="False"<BR>
				OnItemDataBound="dgARecord_ItemDataBound" 
				OnDeleteCommand="dgARecord_Delete"><BR>
				<ItemStyle CssClass="txthLabel"></ItemStyle><BR>
				<HeaderStyle Font-Bold="True" CssClass="btnActionh"></HeaderStyle><BR>
				<FooterStyle CssClass="btnActionh"></FooterStyle><BR>
				<Columns><BR>
				<asp:TemplateColumn HeaderText="S.No" ItemStyle-HorizontalAlign="Center" 
				ItemStyle-Width="15%"><BR>
				<ItemStyle CssClass="ContentSpacer" Width="10%"></ItemStyle><BR>
				<ItemTemplate><BR>
				<asp:label text='<%# DataBinder.Eval(Container.DataItem, 
				"SerialNumberA")%>' id="SerialNumberA" runat="server" EnableViewState="true" 
				CssClass="txthLabel"><BR>
				</asp:label><BR>
				</ItemTemplate><BR>
				</asp:TemplateColumn><BR>
				<asp:TemplateColumn HeaderText="HostName Value" 
				ItemStyle-HorizontalAlign="Center" ItemStyle-Width="25%"><BR>
				<ItemStyle CssClass="ContentSpacer"></ItemStyle><BR>
				<ItemTemplate><BR>
				<asp:TextBox id="txtHostNameValueA" runat="server" CssClass="txthLabel" 
				MaxLength="50"></asp:TextBox><BR>
				</ItemTemplate><BR>
				</asp:TemplateColumn><BR>
				<asp:TemplateColumn HeaderText="IPAddress Value" 
				ItemStyle-HorizontalAlign="Center" ItemStyle-Width="25%"><BR>
				<ItemStyle CssClass="ContentSpacer"></ItemStyle><BR>
				<ItemTemplate><BR>
				<asp:TextBox id="txtIPValueA" runat="server" 
				CssClass="txthLabel"></asp:TextBox><BR>
				</ItemTemplate><BR>
				</asp:TemplateColumn><BR>
				<asp:ButtonColumn Text="Delete" ButtonType="PushButton" HeaderText="Delete 
				Row" CommandName="Delete"<BR>
				ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%"><BR>
				<ItemStyle CssClass="ContentSpacer"></ItemStyle><BR>
				</asp:ButtonColumn><BR>
				</Columns><BR>
				</asp:datagrid>
</DIV>

<DIV>
<asp:RequiredFieldValidator 
						id="lblErrorHost" Runat="server" ErrorMessage="Host Name is required." 
						ControlToValidate="txtHostNameValue">*</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator 
						ControlToValidate="txtHostNameValue" Runat="server" ErrorMessage='Your Hostname 
						Value must be a Fully Qualified Domain name e.g. test999.ab.ad.op.com'
				
					ValidationExpression="\w+([-]\w+)*\.\w+([-]\w+)*\.\w+([-.]\w+)*" 
					ID="regHNC">*</asp:RegularExpressionValidator></DIV>

2. Binding the dataset to the datagrid

We need to display the data inputted by the user or the data from the database. We had the data inserted by the User, we can save the data inputted by the user in “Session”, “ViewState”, “Application” object or else can create a temporary table in the database and display it accordingly, this technique can be applied if the network speed is not an issue and also the numbers of users accessing the application are few.

Usually it is better to go for “Hidden” or “ViewState” objects. In our application we needed to preserve the data inputted by the user in the “Add Request” and “Delete Request” pages hence we opted for “Session” variables.

In Step 1 we create add those many rows created/added by the user. ShowGridARecord()method takes care of the same.

Public Sub ShowGridARecord()
    Dim dtTemp As DataTable = New DataTable
    Dim intCounter As Integer
    Dim intRowCountARecord As Integer
    Dim drCol As DataColumn
    drCol = New DataColumn("SerialNumberA")
    dtTemp.Columns.Add(drCol)

    If (ViewState("rowCntA") Is Nothing) Then
        intRowCountARecord = 0
    Else
        intRowCountARecord = ViewState("rowCntA")
    End If

    For intCounter = 0 To intRowCountARecord
        Dim drRow As DataRow
        drRow = dtTemp.NewRow()
        drRow.Item(0) = intCounter + 1
        dtTemp.Rows.Add(drRow)
        drRow = dtTemp.NewRow()
    Next

    dgARecord.DataSource = dtTemp.DefaultView
    dgARecord.DataBind()
End Sub

In Step 1 we insert the data in the respective columns – the data which has been inputted by the user. The last line of the ShowGridARecord() method asks for the databind of the datagrid. This passes the control to the “ItemDataBound” method. This is the place where we write the code which insert the values in the appropriate controls of the datagrid.

Public Sub dgARecord_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgARecord.ItemDataBound

        HNValA = Session("HostNameArrayA")
        IPValA = Session("IPArrayA")

        If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.EditItem) Then
            Dim txtHostNameValueA As TextBox = DirectCast(e.Item.FindControl("txtHostNameValueA"), TextBox)
            txtHostNameValueA.Text = HNValA(e.Item.ItemIndex)
            Dim txtIPValueA As TextBox = DirectCast(e.Item.FindControl("txtIPValueA"), TextBox)
            txtIPValueA.Text = IPValA(e.Item.ItemIndex)
        End If
    End Sub

3. Applying CSS class to the controls on the fly

As we had already mentioned that applying formatting and styles over datagrid is very simple, as most of the things are done by ASP.Net itself. You can see how easily we have applied style-class on newly created controls.

Private Sub dgARecord_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgARecord.ItemCreated

        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim myButton As Button = DirectCast(e.Item.Cells(3).Controls(0), Button)
            myButton.CssClass = "btnAction"
        End If
    End Sub

4. Adding rows to the datagrid

On click of “Add” button we firstly save the data entered by the user in the “ViewState” or “Session” variable after that we increment the counter of number of rows. The next step includes generating the rows/controls of the datagrid depending on the number of the counter and then inserting the values (last entered) by the user in the counter.

Private Sub btnAddA_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddA.Click
    If (ViewState("rowCntA") < 9) Then
        Dim intCounter As New Integer
        Dim leave As New Integer
        Dim intRowCountARecord As Integer
        leave = 0

        If (ViewState("rowCntA") Is Nothing) Then
            intRowCountARecord = 0
        Else
            intRowCountARecord = CType(ViewState("rowCntA"), Integer)
        End If

        For intCounter = 0 To intRowCountARecord
            Dim txtHNGet As TextBox
            txtHNGet = dgARecord.Items(intCounter).Cells(1).Controls(1)
            If txtHNGet.Text = "" Then
                HNValA(intCounter) = txtHNGet.Text.Trim
                leave = 1
            End If

            HNValA(intCounter) = txtHNGet.Text
            Dim txtIPGet As TextBox
            txtIPGet = dgARecord.Items(intCounter).Cells(2).Controls(1)
            If txtIPGet.Text = "" Then
                IPValA(intCounter) = txtIPGet.Text.Trim
                leave = 1
            End If
            IPValA(intCounter) = txtIPGet.Text.Trim
        Next

        If (leave = 1) Then
            Exit Sub
        End If

        Session("HostNameArrayA") = HNValA
        Session("IPArrayA") = IPValA
        ViewState("rowCntA") += 1
        ShowGridARecord()
    Else
        lblErrorMessage.Text = "You cannot add more than 10 Request." & C_VERTICAL_SPACER
    End If
End Sub

5. Deleting rows from the datagrid

On click of “Delete” button we firstly save the data entered by the user in the “ViewState” or “Session” variable, in this step we save the data of all the rows apart from the row for which user has clicked the delete button “UpdateEntriesARecord(e.Item.ItemIndex)” takes care of the same.After that we decrement the counter of number of rows. The next step includes generating the rows/controls of the datagrid depending on the number of the counter and then inserting the values (last entered) by the user in the counter.

Sub dgARecord_Delete(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
        If (ViewState("rowCntA") < 1) Then
            lblErrorMessage.Text = "You have to process atleast one request." & C_VERTICAL_SPACER
            lblErrorMessage.Visible = True
        Else
            UpdateEntriesARecord(e.Item.ItemIndex)
            dgCNameRecord.EditItemIndex = -1
            ShowGridARecord()
        End If
    End Sub

Private Sub UpdateEntriesARecord(ByVal index As Integer)
    Dim intCounter As New Integer
    Dim intRecordCounterARecord As Integer
    Dim intArrayCounter As Integer
    intArrayCounter = 0
    If (ViewState("rowCntA") Is Nothing) Then
        intRecordCounterARecord = 0
    Else
        intRecordCounterARecord = CType(ViewState("rowCntA"), Integer)
    End If
    For intCounter = 0 To intRecordCounterARecord
        If (intCounter <> index) Then
            Dim txtHNGet As TextBox
            txtHNGet = dgARecord.Items(intCounter).Cells(1).Controls(1)
            HNValA(intArrayCounter) = txtHNGet.Text.Trim

            Dim txtIPGet As TextBox
            txtIPGet = dgARecord.Items(intCounter).Cells(2).Controls(1)
            IPValA(intArrayCounter) = txtIPGet.Text.Trim
            intArrayCounter += 1
        End If
    Next
    Session("HostNameArrayA") = HNValA
    Session("IPArrayA") = IPValA
    ViewState("rowCntA") -= 1
End Sub

Advantages

1) Less time required for formatting and applying styles over the newly created controls
2) Simple to implement

Disadvantages

1) Performance is mainly a concern when datagrid is used. However we can improve the performance if we disable the “EnableViewState” property at the page level

Conclusion

1) Please note that using ASP.Net Tables also we can achieve the similar functionality. The purpose of the BOK is just to show that we can implement the dynamic control features using Datagrid and that too in less time.