Creating server controls dynamically at runtime inside a grid item template

Question

Hello

I've an item template inside a grid which has a <asp:LinkButton/> inside it. I assign the text for the link button as

<%# Convert.ToString(Eval("Tags"))%>

Tags can have a string with multiple tags in it delimited by space. For eg. "sports", "sports cricket", "sports cricket sachin" are the examples of some possible tags.

I want to create a button for each tag inside the string. How can i create the controls (server control - linkbutton) dynamically during runtime inside the grid item template?

Thank you

Answer 1

I assuming the grid you are referring to is a data grid?

This tutorial has a great example. To summarise:

Add a Template column to your grid view in place of the link button column:

<asp:datagrid id="dataGrid1" runat="server" Width="792px" 

    AutoGenerateColumns="False" 
    CellPadding="0" >

    <Columns>


        <asp:BoundColumn DataField="id" HeaderText="ID"> 
            <HeaderStyle Width="190px" HorizontalAlign="Center" >
            </HeaderStyle> 
        </asp:BoundColumn> 


        <asp:TemplateColumn HeaderText="Tags" 
                     HeaderStyle-HorizontalAlign="Center"> 
            <ItemStyle HorizontalAlign="Left" Wrap="True"></ItemStyle> 
            <ItemTemplate> 
                <asp:Repeater ID="rptChild" runat="server" DataSource='<%# DataBinder.Eval(Container.DataItem, "tags").ToString().Split(tagSplitChars) %>'> 
                    <ItemTemplate> 
                        <asp:LinkButton ID="linkChild" 
                        runat="server" 
                            CommandArgument="<%# Container.DataItem%>"
                            > 
                            <%# Container.DataItem%> 
                        </asp:LinkButton> 
                    </ItemTemplate> 
                </asp:Repeater> 
            </ItemTemplate> 
        </asp:TemplateColumn> 
    </Columns> 
    <PagerStyle PageButtonCount="20" Mode="NumericPages"></PagerStyle> 
</asp:datagrid>

Note that tagSplitChars should be defined in your code behind as:

 protected char[] tagSplitChars  = new char[] { ' '};

Clearly you can add an "onclick" handler to you link button as you need.

I have tested this with this code behind and it works perfectly:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Demo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        public char[] splitChars = new char[] { ' '};
        protected void Page_Load(object sender, EventArgs e)
        {
            dataGrid1.DataSource = new List<dynamic>() { new { id = 1, names = "one single" }, new { id = 2, names = "two double" } };
            dataGrid1.DataBind();
        }

    }
}

---

UPDATE

If you are just trying to add a list of buttons, and have no other columns to display in your grid, you can simplify the solution significantly:

<asp:Repeater ID="rptChild" runat="server" > 
    <ItemTemplate> 
        <asp:LinkButton ID="linkChild" runat="server"> 
             <%# Container.DataItem%> 
        </asp:LinkButton> 
    </ItemTemplate> 
</asp:Repeater> 

Then in the code behind

        protected void Page_Load(object sender, EventArgs e)
        {
            dataGrid1.DataSource = myTagsString.split(splitChars);
            dataGrid1.DataBind();
        }

Clearly you will have to access the data in your datatable manually to extract the string, haven't done this in a while but from memory it is quite simple.

Answer 2

If the tags reside in a single data table column, construct a select Sql query which fetches the tag values from it and assign the result data table or reader as grid source. If some some of the column values contain more than one tag separate with comma, split them at runtime as Giles proposed.