This is a migrated thread and some comments may be shown as answers.

Creating items dynamically

4 Answers 109 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
RetoHell
Top achievements
Rank 1
RetoHell asked on 27 Oct 2008, 03:38 PM
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> 
                                         
                                        <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> 
                                         
                                        <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> 
                                       
                                        <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


4 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 27 Oct 2008, 04:44 PM
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.
0
RetoHell
Top achievements
Rank 1
answered on 28 Oct 2008, 11:03 AM
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> 
                                         <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



0
RetoHell
Top achievements
Rank 1
answered on 28 Oct 2008, 03:24 PM
i just opened a support ticket and sent you a sample app. thanks!

all the best
tom
0
Simon
Telerik team
answered on 30 Oct 2008, 05:33 PM
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.
Tags
PanelBar
Asked by
RetoHell
Top achievements
Rank 1
Answers by
Simon
Telerik team
RetoHell
Top achievements
Rank 1
Share this question
or