How to add AjaxControlToolkit's Gravatar Control before or after checkbox in checkboxlist control

Question

I have a CheckBoxList control that contains dynamically generated checkbox items. This checkboxlist will contain usernames. I am using Gravatar control from AjaxControlToolkit to allow users to have their own profile pictures. What I want is that when a checkbox with username as a text is added to the CheckBoxList, a Gravatar control should also be added before or after the checkbox, showing the corresponding display picture of the user. An alternative way came to my mind is to have a custom user control with a checkbox and gravatar. But if any other lite and easy solution available then please suggest me. Following is the code:

<table class="style1">
                <tr>
                    <td align="right" style="padding: 5px" width="25%">
                        Username/Email:</td>
                    <td style="padding: 5px">
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        &nbsp;<asp:Button ID="Button1" runat="server" CssClass="newButton" 
                            onclick="Button1_Click" Text="Search" />
                    </td>
                </tr>
                <tr>
                    <td align="right" style="padding: 5px" valign="top" width="25%">
                        Results:</td>
                    <td style="padding: 5px">
                        <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                            onselectedindexchanged="CheckBoxList1_SelectedIndexChanged" 
                            AutoPostBack="True">
                        </asp:CheckBoxList>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="padding: 5px" width="25%" valign="top">
                        Selected People:</td>
                    <td style="padding: 5px">
                        <asp:ListBox ID="ListBox1" runat="server" Height="149px" Width="260px">
                        </asp:ListBox>
                    </td>
                </tr>
            </table>

As you can see it also has a listbox that contains the selected item from checkboxlist. If possible please suggest me the same for the listbox.

Answer 1

The Repeater control would be suitable for this. It allows you to bind to a data source and create a template for how the items should be displayed.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
...
<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <asp:CheckBox ID="checkBox" runat="server" />
        <act:Gravatar runat="server" ID="gravatar" Email='<%# DataBinder.Eval(Container, "DataItem.useremail")%>' Size="50" Rating="G" DefaultImageBehavior="Identicon" DefaultImage="http://tinyurl.com/3bpsaac" />
        <asp:Label ID="userName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.username")%>'></asp:Label>
        <br />
    </ItemTemplate>
</asp:Repeater>

I have this Repeater bound to the following DataTable:

System.Data.DataTable GetRepeaterData() {
    DataTable dt = new DataTable();
    dt.Columns.Add("username", typeof(string));
    dt.Columns.Add("useremail", typeof(string));
    dt.Rows.Add("user_one", "test@superexpert.com");
    dt.Rows.Add("user_two", "test@superexpert.com");
    dt.Rows.Add("user_three", "test@superexpert.com");
    return dt;
}