[Solved] Creating items dynamically

[RetoHell]

Hi, i need some help with the following scenario..

While prototyping we built the following RadPanel (with a dozen items, in this example there are just two items included), and this works perfect.

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Web20" Width="230px"
        ExpandMode="SingleExpandedItem" ExpandAnimation-Type="InOutSine" ExpandAnimation-Duration="300">
        <Items>
            <telerik:RadPanelItem Text="MYTITLE">
                <Items>
                    <telerik:RadPanelItem>
                        <ItemTemplate>
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>

                                        <p class="normal">
                                            MYTEXT BLABLA
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="MYTITLE 2">
                <Items>
                    <telerik:RadPanelItem>
                        <ItemTemplate>
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>

                                        <p class="normal">
                                            MYTEXT 2 BLBABLABLA
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
    </Items>
    </telerik:RadPanelBar>

But we have to create all the items dynamically.

Now this is my .aspx code:

    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Web20" Width="230px"
        ExpandMode="SingleExpandedItem" ExpandAnimation-Type="InOutSine" ExpandAnimation-Duration="300">
       <Items>

       <telerik:RadPanelItem>

        <ItemTemplate>
                            <table border="0" cellpadding="0" cellspacing="0" width="230">
                                <tr>
                                    <td>

                                        <p class="normal">
                                            <%# Container.DataItem("Text") %>
                                        </p>
                                    </td>
                                </tr>
                            </table>
      </ItemTemplate>
       </telerik:RadPanelItem>
       </Items>

    </telerik:RadPanelBar>

and this the code-behind (dt contains all the needed fields):

 For Each row As DataRow In dt.Rows

                Dim topItem As New RadPanelItem
                topItem.Text = row.Item("Title").ToString.Substring(0, 10)
                topItem.Expanded = False
                RadPanelBar1.Items.Add(topItem)

                Dim subItem As New RadPanelItem
                subItem.Text = row.Item("Text").ToString
                subItem.Expanded = False

                topItem.Items.Add(subItem)

            Next

The result looks quite different. I would be very happy if you could help me with this one. I suppose i'm doing something wrong with the itemtemplate (?) ..

All the best
Tom

[Simon]

Hello Tom77,

You need to call the DataBind method of the PanelBar, after all of the Items are created and added to it, so that the Templates apply properly.

Additionally you should use the following binding expression:

<%# DataBinder.Eval(Container, "Text") %>

instead of this:

<%# Container.DataItem("Text") %>

The value for the Template is extracted from the Text property of the current PanelBarItem and the first binding expression does just that.

I hope this helps.




Regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[RetoHell]

Hi Simon

Thank you for your reply. But this does not work. Maybe my description was a bit vague.

The problem is, that i should dynamically generate a topItem (containing just a title) and a subItem with a template (containing text, images and so on).

Have a look at the following code:

<Items>
            <telerik:RadPanelItem Text="TITLE">
                <Items>
                    <telerik:RadPanelItem>
                        <ItemTemplate>
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                         <p class="normal">
                                            <%# DataBinder.Eval(Container,"Text") %>
                                                                                </p>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
</Items>

Now i got a datatable containing title/text in a row.I'm looping through all the rows, add a topItem to the RadPanelBar and a subItem to the topItem. After that i'm calling the databind method of the RadPanelBar. The result still looks quite weird..all the items are added twice for example..

Thank you for your assistance.
Tom

[RetoHell]

i just opened a support ticket and sent you a sample app. thanks!

all the best
tom

[Simon]

Hello Tom77,

Unfortunately your goal could not be easily achieved with RadPanelBar. There are certain specifics of the Template mechanism which you should first consider.

The first specific is that the Template of an Item renders directly on the Item itself, as it is observable on your page. The second thing is that Templates can be defined declaratively only on certain levels:

• RadPanelBar-Level - this Template is global and will apply to all Items.
• RadPanelItem-Level - this Template is local and will apply only to the Item in which it is defined.

In case the RadPanelBar is created dynamically (data bound, etc.) and only certain Items (or levels of Items) should have Templates, things get a lot more complicated, yet possible. There are a few ways of achieving that.

Since your Template relies more on HTML, in this Code Library project you can see a sample implementation, which is designed to ease the way of maintaining such Templates.

Briefly, the Template is defined as a WebUserControl. When the PanelBar is bound to its data source, the Template is loaded, populated with data and added in a child Item of the currently bound Item (root).

On each PostBack, the Template is reloaded and re-added to its corresponding Item. The data is again populated, now from the Custom Attributes of the Item.

Regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.