ARTICLE

Using a Web User Control inside the GridView control

Posted by Michael Livshitz Articles | ASP.NET using VB.NET July 04, 2007
In this article I will share how a Web User Control can be used in the GridView control.
 
Reader Level:


Developing some web site we often should use some control in the GridView control. In this case we have to create the GridView control with TemplateField columns and use some special methods to access needed data. Inside the GridView control we can use both standard server controls (such as DropDownList , etc.) and our own controls. In this article I will show how a web user control can be used in the GridView control. As example we will use our old friend : the ListBoxesFT_C control.
We will use our WebSites_Test solution . To the WF_ListBoxes.aspx we will add the GridView control.
Our GridView control, named just "GridView1", has caption "TestUC_InsideGV" and consists of five columns.

The first  one is "the type of" the BoundField and contains some "Identity number"; the HeaderText property of this column is "Num".

The second column is the TemplateField and contains our ListBoxesFT_C control with Id = "ListBoxesFT_C2"; the HeaderText property of this column is "UC". 

The third column is the  ComandField (the select column) and allows to check out the "out data" of the selected row of the GridView1 control; the HeaderText property of this column is "Select".

The fourth column is the TemplateField and contains GridView control with Id = "GridView_Inside", which allows to display the C_DataOut property of the ListBoxesFT_C2 for selected row; the HeaderText property of this column is "Test_GridView".

The fifth column is the TemplateField and contains two TextBox controls with Id="TextBox_Text" and Id="TextBox_Value",  which allow to display the C_DataOut property as text and value; the HeaderText property of this column is "Test_TextValue".

We also will use our GridViewTestDT_Out (with the caption "TestSelect_All") to display all selected value and text according to "Num" column; we will do that with the help of the ButtonTestDTOut button click.
For our task we don't need the ListBoxesFT_C1 control and we just change the Visible property to "false".

The source code for GridView1 is following:

<asp:GridView ID="GridView1" runat="server"

        AutoGenerateColumns="False"

        OnSelectedIndexChanged="GridView1_SelectedIndexChanged"

        Caption="TestUC_InsideGV">

    <Columns>

        <asp:BoundField DataField="Num" HeaderText="Num" />

        <asp:TemplateField HeaderText="UC">

            <ItemTemplate >

                <uc1:ListBoxesFT_C ID="ListBoxesFT_C2" 

                    runat="server" C_HeightLB ="70" C_WidthLB ="80"

                    C_Client= "false"

                    C_DataIn ='<%# getDT_ForTemplate()%>'/>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:CommandField ShowSelectButton="True" HeaderText="Select"/>

        <asp:TemplateField HeaderText="Test_GridView">

            <ItemTemplate >

                <asp:GridView ID="GridView_Inside" runat="server" >

                </asp:GridView>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Test_TextValue">

            <ItemTemplate >

                <asp:TextBox ID="TextBox_Text" runat="server" >

                </asp:TextBox>

                <asp:TextBox ID="TextBox_Value" runat="server" >

                </asp:TextBox>

            </ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>
 
As you can see we set the property C_DataIn of the ListBoxesFT_C2 control to some value with  the help of the getDT_ForTemplate() method.
Now we have to add some code to the WebForms_Test_WF_ListBoxes partial class.
First of all add protected method getDT_ForTemplate where we use one of our old friends GetData.GetDataHelp (of course, you can use your own source to get  and return a DataTable ): 

Protected Function getDT_ForTemplate() As DataTable

 

    Dim getData As GetData.GetDataHelp = New GetData.GetDataHelp()

    Return (getData.getDataSetCities(4).Tables(0))

End Function
In order to fill column "Num" add to the protected void Page_Load method the following code: 

Dim getData_GV As GetData.GetDataHelp = New GetData.GetDataHelp()

If (Not IsPostBack) Then

    GridView1.DataSource = getData_GV.getDataSetNum(3).Tables(0)

    GridView1.DataBind()

End If

Here I use the method (getDataSetNum), that just returns numbers as DataSet (again, you can use your own source):  

'The method getDataSetNum that returns dataSet with

'one dataTable "DataTableNum". The dataTable consists of

'one column :  "Num" .

'The dataTable is filled with the help of

'the "for" loop; the number of the rows is input parameter.

 

Public Function getDataSetNum(ByVal iRows As Integer) As DataSet

    Dim dt As DataTable = New DataTable("DataTableNum")

    Dim dc_Num As DataColumn

    Dim dRow As DataRow

    Dim ds As DataSet = New DataSet()

    ds.Clear()

    dc_Num = New DataColumn("Num", Type.GetType("System.String"))

    dt.Columns.Add(dc_Num)

    For i As Integer = 0 To iRows - 1

        dRow = dt.NewRow()

        dRow("Num") = i.ToString()

        dt.Rows.Add(dRow)

    Next i

    ds.Tables.Add(dt)

    Return ds

End Function

 

Now we add code to the method GridView1_SelectedIndexChanged, which is "responsible" for the SelectedIndexChanged event, that is fired when we click on the select column. First of all we have to create DataTable dt, that in fact is the C_DataOut property of the ListBoxesFT_C2 control of the selected row: 

Dim dt As DataTable = CType(GridView1, UserControls_ListBoxesFT_C)

SelectedRow.FindControl("ListBoxesFT_C2")).C_DataOut

 

Secondly we find for the selected row the GridView_Inside control:

 

Dim gv As GridView = CType(GridView1, GridView)

SelectedRow.FindControl("GridView_Inside"))

Then we just bind gv : 

gv.DataSource = dt
gv.DataBind() 
Now in our hands there are DataTable dt, and we can, with the help of  the loop, to fill out the TextBox_Text and TextBox_Value controls of the selected row: 

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)

    Dim dt As DataTable = (CType(GridView1., UserControls_ListBoxesFT_C) SelectedRow.FindControl "ListBoxesFT_C2")).C_DataOut

    Dim gv As GridView = (CType(GridView1., GridView) SelectedRow.FindControl("GridView_Inside"))

    gv.DataSource = dt

    gv.DataBind()

    Dim sText As String = ""

    Dim sValue As String = ""

    Dim iRows As Integer

    Dim iCount As Integer

    iRows = dt.Rows.Count

 

    For iCount = 0 To iRows - 1

        sText &= dt.Rows(iCount)(1).ToString()

        If iCount <> iRows - 1 Then

            sText &= ";"

        End If

 

        CType(GridView1.SelectedRow., TextBox) FindControl("TextBox_Text").Text = sText

        sValue &= dt.Rows(iCount)(0).ToString()

        If iCount <> iRows - 1 Then

            sValue &= ";"

        End If

 

        CType(GridView1.SelectedRow., TextBox) FindControl("TextBox_Value").Text = sValue

    Next iCount

End Sub

OK! Now let's create the method getDataSetGV. This method returns DataSet with one table "DataTableGV", that consists of two columns : "Num" and "Text". We have to loop through the GridView1 control and "to write down" in the "Num" column all value of the "Num" column of the GridView1 control and in the "Text" column all selected value (text) according to the "Num" column. Again we use FindControl method: 

Private Function getDataSetGV() As DataSet

    Dim grRow As GridViewRow

    Dim dt As DataTable = New DataTable("DataTableGV")

    Dim dc_Num As DataColumn

    Dim dc_Text As DataColumn

    Dim dRow As DataRow

    Dim ds As DataSet = New DataSet()

    Dim iRowsGV As Integer

 

    ds.Clear()

    dc_Num = New DataColumn("Num", Type.GetType("System.String"))

    dt.Columns.Add(dc_Num)

    dc_Text = New DataColumn("Text", Type.GetType("System.String"))

    dt.Columns.Add(dc_Text)

    iRowsGV = GridView1.Rows.Count

 

    For i As Integer = 0 To iRowsGV - 1

        grRow = GridView1.Rows(i)

        dRow = dt.NewRow()

        dRow("Num") = grRow.Cells(0).Text

 

        Dim dtInside As DataTable = (CType(GridView1., UserControls_ListBoxesFT_C) Rows(i).FindControl("ListBoxesFT_C2")).C_DataOut

        Dim sTextInside As String = ""

        Dim iRowsInside As Integer

        Dim iCountInside As Integer

        iRowsInside = dtInside.Rows.Count

 

        For iCountInside = 0 To iRowsInside - 1

            sTextInside &= dtInside.Rows(iCountInside)(1).ToString()

            If iCountInside <> iRowsInside - 1 Then

                sTextInside &= ";"

            End If

        Next iCountInside

 

        dRow("Text") = sTextInside

        dt.Rows.Add(dRow)

    Next i

    ds.Tables.Add(dt)

    Return ds

End Function

We use this method to set the DataSource property of the GridViewTestDT_Out control when we click on the button ButtonTestDTOut: 

Protected Sub ButtonTestDTOut_Click(ByVal sender As Object, ByVal e As EventArgs)
    GridViewTestDT_Out.DataSource = getDataSetGV().Tables(0)

    GridViewTestDT_Out.DataBind()

End Sub

CONCLUSION 

I hope that this article will help you to create the GridView control with a user control (your own web user controls or just standard server controls) and receive all needed data from the built in control.
Good luck in programming

NOTE: THIS ARTICLE IS CONVERTED FROM C# TO VB.NET USING A CONVERSION TOOL. ORIGINAL ARTICLE CAN BE FOUND ON C# CORNER (http://www.c-sharpcorner.com/).

Login to add your contents and source code to this article
share this article :
post comment
 
Nevron Diagram
Become a Sponsor
PREMIUM SPONSORS
  • ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor