Adding Controls to the DataGrid Footer Item

In this article, I am going to explain how we can add controls like label,textbox and other controls to DataGrid Footer item. By two ways, you can add controls to datagrid item. One way is during desing mode itself, we can have footertemplate for adding controls. Other way is by adding controls dynamically to DataGrid footer. In this article, I am going to explain both these methods in detail.

For example, in the products datagrid we need to add one cell in which we need to show the total price of all the products. Best place to add this cell is at footer item. Here we are going to see how we can achieve this using two methods. Datagrid will like this with total column in footer item,

Adding controls during Design mode

Use the FooterTemplate property to control the appearance of the footer section in the TemplateColumn. The appearance is specified by creating a template that defines how the item is rendered in the column. To specify a template for the item selected for editing, first place opening and closing <FooterTemplate> tags between the opening and closing tags of the TemplateColumn element. You can then list the content that controls the appearance of the item between the opening and closing <FooterTemplate> tags. The content can be as simple as plain text, or more complex by embedding other controls in the template. As per our requirement, to add total column to datagrid footer we need to add one label control and one textbox as shown below using footertemplate property.

 <asp:datagrid id="DataGrid1" runat="server" width="500px" AllowPaging="False"
                          ItemStyle-CssClass="tableItem" HeaderStyle-CssClass="tableHeader"
                          HeaderStyle-BackColor="#aaaadd" AutoGenerateColumns="False" 

                          DataKeyField="ProductID" ShowFooter="True" BorderWidth="0">

  <Columns>
       <asp:TemplateColumn headertext="Product ID">
            <ItemTemplate>
                     <asp:TextBox style="width:100px;" id="ProductID" runat="server"
                                                                  Text='<%# Container.DataItem("ProductID") %>' >
                     </asp:TextBox>
            </ItemTemplate>
       </asp:TemplateColumn>
       <asp:TemplateColumn headertext="Product Name">
            <ItemTemplate>
                     <asp:TextBox style="width:200px;" id="ProductName" runat="server"           

                                                                 Text='<%# Container.DataItem("ProductName") %>' >
                    </asp:TextBox>
             </ItemTemplate>
       </asp:TemplateColumn>
       <asp:TemplateColumn headertext="Quantity" FooterStyle-HorizontalAlign=Right  >
              <ItemTemplate>
                    <asp:TextBox style="width:100px;" id="Quantity" runat="server"
                                                                   Text='<%# Container.DataItem("QuantityPerUnit") %>' >
                    </asp:TextBox>
               </ItemTemplate>
               <FooterTemplate >
                         <asp:Label Runat=server ID="Label1" >Total&nbsp; </asp:Label>         

                   </FooterTemplate>           </asp:TemplateColumn>
        <asp:TemplateColumn headertext="Product Price" ItemStyle-HorizontalAlign="Right">
                <ItemTemplate>
                     <asp:TextBox style="width:100px;" id="ProductPrice" runat="server" 
                                                                    Text='<%# Container.DataItem("UnitPrice") %>' >
                     </asp:TextBox>      
                </ItemTemplate>
                <FooterTemplate>       
                           <asp:TextBox style="width:100px;" Runat=server ID="Textbox1">90.25             

                            </asp:TextBox>   
                    </FooterTemplate>                  </asp:TemplateColumn>         
  </Columns>       
 </asp:datagrid>

As you see in the above code, to have controls in the footer item. You need to add controls to footertemplate property. In the code behind file, we have code to bind this datagrid from datasource.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles  

                                                                                                                   MyBase.Load

    Dim connstr As String = "Integrated Security=SSPI;Initial Catalog=Northwind;Data Source=.\NetSDK"

    Dim cnn As New SqlConnection(connstr)

    Dim da As New SqlDataAdapter("select top 5 * from products", cnn)

    Dim ds As New DataSet

    da.Fill(ds, "Products")

    DataGrid1.DataSource = ds

    DataGrid1.DataBind()

End Sub

This method looks simple, if you know what controls you need to add in the footer item during design phase itself. But if dont know about controls you need to add during desing phase, then you need to go for next method where you can add the controls dynamically.

Adding Controls Dynamically

This method is very similar to the above explained method, but this method doesnt use footertemplate property to add controls. Instead this method adds control dynamically to footer template when the datagrid is created. So datagrid definition will be like this without footertemplate,

 <asp:datagrid id="DataGrid1" runat="server" width="500px" AllowPaging="False"
                          ItemStyle-CssClass="tableItem" HeaderStyle-CssClass="tableHeader"
                          HeaderStyle-BackColor="#aaaadd" AutoGenerateColumns="False" 

                          DataKeyField="ProductID" ShowFooter="True" BorderWidth="0">

  <Columns>
       <asp:TemplateColumn headertext="Product ID">
            <ItemTemplate>
                     <asp:TextBox style="width:100px;" id="ProductID" runat="server"
                                                                  Text='<%# Container.DataItem("ProductID") %>' >
                     </asp:TextBox>
            </ItemTemplate>
       </asp:TemplateColumn>
       <asp:TemplateColumn headertext="Product Name">
            <ItemTemplate>
                     <asp:TextBox style="width:200px;" id="ProductName" runat="server"           

                                                                 Text='<%# Container.DataItem("ProductName") %>' >
                    </asp:TextBox>
             </ItemTemplate>
       </asp:TemplateColumn>
       <asp:TemplateColumn headertext="Quantity" FooterStyle-HorizontalAlign=Right  >
              <ItemTemplate>
                    <asp:TextBox style="width:100px;" id="Quantity" runat="server"
                                                                   Text='<%# Container.DataItem("QuantityPerUnit") %>' >
                    </asp:TextBox>
               </ItemTemplate>
        </asp:TemplateColumn>
        <asp:TemplateColumn headertext="Product Price" ItemStyle-HorizontalAlign="Right">
                <ItemTemplate>
                     <asp:TextBox style="width:100px;" id="ProductPrice" runat="server" 
                                                                    Text='<%# Container.DataItem("UnitPrice") %>' >
                     </asp:TextBox>      
                </ItemTemplate>
         </asp:TemplateColumn>         
  </Columns>       
 </asp:datagrid>

Similar to the above method, in the page load we need to bind this datagrid. For adding controls dynamically, we need to override ItemCreated event of the DataGrid. Sourcecode for this will be,

Private Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As 

                    System.Web.UI.WebControls.DataGridItemEventArgs)  Handles DataGrid1.ItemCreated

    If (e.Item.ItemType = ListItemType.Footer) Then

        e.Item.Cells(2).Text = "Total&nbsp;"

        e.Item.Cells(2).HorizontalAlign = HorizontalAlign.Right

        Dim oTextbox As New TextBox

        oTextbox.Width = New Unit(100, UnitType.Pixel)

        oTextbox.Text = "90.3500"  'This can be changed to populate from some datasource.

        e.Item.Cells(3).Controls.Add(oTextbox)

    End If

End Sub

Here we are adding label control and textbox control in the corresponding cells. While adding controls, we can set the the properties like text,alignment for that controls before adding to the footer item.

Conclusion

In this article, we have seen how we can add controls like label and textbox to the datagrid footer. Applying the same concept, we can add any controls to the datagrid footer dynamically or during design mode.