Dynamically generating items but getting double spacing

[Paul]

Hi. I've got some simple code but it isn't working and at the moment I am not seeing why :)

I have a listbox and a panelbar. The listbox just contains a set of entries with simple text for each. In my code behind I have the following (pnlMenu is my panelbar):

pnlMenu.Items.Clear();
RadPanelItem rootItem = new RadPanelItem();
rootItem.Text = "Heading";
rootItem.Expanded = true;
if (RadListBox2.Items.Count() > 0)
{
foreach (RadListBoxItem i in RadListBox2.Items)
{
RadPanelItem childItem = new RadPanelItem() { Text = i.Text };
// childItem.Value = i.Value;
rootItem.Items.Add(childItem);
}
}
else
{
RadPanelItem childItem = new RadPanelItem();
childItem.Text = "No items";
rootItem.Items.Add(childItem);
}
pnlMenu.Items.Add(rootItem);

When this executes I get the panelbar dynamically created but each childItem has two lines and moving the cursor over items it is the first line which is highlighted and this line is blank. The second line contains the text from the listbox. Does this explanation make sense? Thanks

[Cori]

Hello Paul,

The reason the it only highlights the first line is because the image it uses for highlighting the items was designed for single-line entries. I don't have any solution that could resolve that, other than creating a two line image highlighter to accomodate the increased height.

[Paul]

Hi. Thanks for your reply but that isn't the problem. My problem is that I don't want items to each be two-lines and I don't understand why they are.

The listbox has a collection of items and each item has a simple text value which is a very short single line text string.

So when I perform panelItem.text = listboxitem.text;  I assumed that the panelbar would just get an item in it that was effectively the same as what came from the listbox. However, in the panelbar each item is being displayed with two lines. The first line is entirely blank (but is what is highlighted when I mouse over and the second line contains the text from the listbox.

As an example. Say my listbox items collection has 3 items in it with there text:
listbox.items[0].text = "text1"
listbox.items[1].text = "text2"
listbox.items[2].text = "text3"

[not real code so forgive any error but it illustrates what I mean]

then if I run:

foreach (RadListBoxItem i in RadListBox2.Items)
{
RadPanelItem childItem = new RadPanelItem() { Text = i.Text };
rootItem.Items.Add(childItem);
}

I would expect a panelBar that looks like:

RootName
   text1
   text2
   text3

But what I am getting is:

RootName
_____
   text1
_____
   text2
_____
   text3

where "_____" is actually just a blank line. I have debugged the code and the listbox has 3 items and the text property for each is a simple string. So why is the code resulting in 3 double line items in the panelbar?

[Cori]

Hello Paul,

I created a sample page and it worked correctly for me.

ASPX page:

<telerik:RadListBox ID="RadListBox1" runat="server">
        <ButtonSettings TransferButtons="All"></ButtonSettings>
        <Items>
            <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
            <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
            <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
        </Items>
    </telerik:RadListBox>
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" Expanded="true">
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
    {
        // hold root item
        RadPanelItem rootItem = RadPanelBar1.Items[0];

        foreach (RadListBoxItem item in RadListBox1.Items)
        {
            RadPanelItem childItem = new RadPanelItem(item.Text);
            rootItem.Items.Add(childItem);
        }
    }

See if that works for you. If it doesn't, perhaps trying to trim the text you pass to the RadPanelItem. There might be some extra space that you're not seeing.

[Paul]

Hi Cori. Thanks very much for the reply. Your code is what I would expect.

I have tried to do some debugging. Looking at the text added to the panel, the text is simple text and I have double check the lenght property to make sure that there are no hidden characters in there.

Initially, the panelbar is just an empty control. It is then constructed (within the code behind) on a page event. To try to analyse what's happening I created the root item in the aspx page (effectively identical to your code) and I then add the child items in the code behind when the event triggers.

I get interesting results when I run this. The page is created with just the root item (as expected) but this has the double line spacing. Then when the event triggers the code behind to add the child items to the panelbar the root item (which isn't modified by the code) becomes a normal single line item and the child items are double line format.

This I suspect that something is going on with the formatting/css/style. However, I have no style or css settings for the panelbar and have done nothing with css on this page (yet). I have to go out at the moment but will try to debug this further later. Thanks for all of your help.

[Cori]

So you don't have any global styles that might be interferring with the RadPanelBar's rendering. The RadPanelBar uses a lot of ul, li and a elements. The a elements are create for each PanelBarItem, to allow them to be clicked. Perhaps you have some style affecting those elements.