Creating dynamic repeater in asp.net

Question

Hi I am building an online sports goods shop,
I have this plan of loading in all Sports Type in the Home page, like Football,Cricket,Basketball etc
And the administrator can create a game at his own will,

Here's the confusion
How do I display the SubCategories of each Game if clicked (inside the repeater).
I thought of adding an ImageButton to it!! But then how do I link that Image Button to the games, i.e. when the user clicks the respective Image button -> The subcategories of that game should be displayed

For example:
1. If I have games such as Cricket,Football etc.
2. The Repeater should show all the games in the repeater
3. When The User clicks on for instance Cricket
4. I wish to load all subcategories of cricket goods such as the BAT,BALL,STUMPS etc.

I attempted this by loading the games in Repeater as shown in below code snippet:

       <asp:Repeater ID="RepDetails" runat="server" 
        ondatabinding="RepDetails_DataBinding">
        <HeaderTemplate>
            <table style="border: 1px solid #df5015; width: 500px" cellpadding="0">
                <tr style="background-color: #df5015; color: White">
                    <td colspan="2">
                        <b>Type of Sports</b>
                    </td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style="background-color: #EBEFF0">
                <td>
                    <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                        <tr>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Category") %>' Font-Bold="true" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton2_Click" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

I've even added the ImageButton but confused about making it load the respective subcategories of that game!

Suggestions are welcome if there can be another work around which can be more effective..

-1: for using broken keyboard. Please check your shift/capslock - it seem to be randomly stuck as there huge number of all-caps text in your post. You can try to make sample smaller to make question better. — Alexei Levenkov
– Alexei Levenkov, Commented Oct 23, 2013 at 5:55
To link on imagebutton, for showing sub categories you can use ajax method to load the sub categories dynamically Or you may use TreeView Control.. Rest what you have asked is very broad question there are many ways actually.. — Harsh Baid
– Harsh Baid, Commented Oct 23, 2013 at 6:01
Thankyou Harsh for your reply!! Could you let me a desription of how can I know which imagebutton has the user clicked for now atleast so that I can get working on this, I will also check out the treeView... thanks — user2866238
– user2866238, Commented Oct 23, 2013 at 6:05
@user2866238 you need to understand markdown formatting to highlight the text in proper format..; For me, using Caps in whole sentence does not highlight but instead distracts reader and shows low quality of question — Harsh Baid
– Harsh Baid, Commented Oct 23, 2013 at 6:17

Hans Derks · Accepted Answer · 2013-10-23 06:33:56Z

You could try a nested repeater

In aspx

<asp:Repeater ID="RepDetails" runat="server" OnDataBinding="RepDetails_DataBinding">
    <HeaderTemplate>
        <table style="border: 1px solid #df5015; width: 500px" cellpadding="0">
            <tr style="background-color: #df5015; color: White">
                <td colspan="2">
                    <b>Type of Sports</b>
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr style="background-color: #EBEFF0">
            <td>
                <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>' />
                        </td>
                        <td>
                            <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Category") %>' Font-Bold="true" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton2_Click" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <asp:Repeater ID="SportsProps" runat="server">
            <ItemTemplate>
                <tr style="background-color: #EBEFF0">
                    <td>
                        <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                            <tr>
                                <td>
                                    <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Name") %>' Font-Bold="true" />
                                </td>
                                <td>
                                    <asp:ImageButton ID="ImageButton3" runat="server" OnClick="ImageButton3_Click" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

In code behind

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RepDetails.DataSource = GetData();
            RepDetails.DataBind();
        }
    }

    protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
    {
        Repeater repeater = ((ImageButton)sender).NamingContainer.FindControl("SportsProps") as Repeater;
        Label catLabel = ((ImageButton)sender).NamingContainer.FindControl("lblSubject") as Label;
        repeater.DataSource = GetDataDetail(catLabel.Text);
        repeater.DataBind();
    }

    protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
    {
        //do something to hide the 
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("category", typeof(string));
        dt.Rows.Add("1 ", "Basketball");
        dt.Rows.Add("2 ", "Football");
        dt.Rows.Add("3 ", "Soccer");
        return dt;
    }

    private DataTable GetDataDetail(string category)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("name", typeof(string));
        dt.Rows.Add("Bat");
        dt.Rows.Add("Ball");
        dt.Rows.Add("Stump");
        return dt;
    }

Collectives™ on Stack Overflow

Creating dynamic repeater in asp.net

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related