ListBox - RadHostControl?

[Alex Peachey]

I'd like to put a list box on a form that holds very complex items. I was thinking I could probably do this by creating a user control that has the layout and items I want in each list item. Then wrap that in a RadHostControl and somehow put that inside a RadListBoxItem.

I believe I'm on the right track, and if so, how exactly do I accomplish what I'm trying to do?

If I'm way off base, is there a way I can make complex list items for a listbox?

As a concrete and simple example, let's say I wanted each item in the list to have 2 labels, 2 buttons, and a textbox.

Thanks,

Alex

[Angel]

Hi Alex Peachey,

It is possible to add controls inside listbox items, but this works only with Q2 2008 SP1.

I have attached a sample project for your reference. Here are some notes that are not obvious from the example:

1. The list box must be wider than the widest hosted control plus the width of the vertical scrollbar.
    
2. The height of the listbox must follow the equation:
   height = k * lbiHeight + BorderHeight, where:
   k - integer number
   lbiHeight - height of a listbox item
   BorderHeight - border height

The first limitation avoids overlapping of the vertical scrollbar by the hosted controls. The second limitation is necessary to avoid overlapping of the listbox border by the hosted controls. Note that by default the height of the listbox item is equal to the height of the hosted control plus the height of the border of the item (usually 2 pixels).

In the given example the height of the hosted control (LBItemControl) is 54, the height of a listbox item with that control inside it is 56 and the height of the RadListBox is 170:
170 = 3 * 56 + 2

 

Regards,
Angel
the Telerik team

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

[Alex Peachey]

Thank you, this looks like it will work perfectly for what I'm trying to do.

[Adam]

I am interested in this functionality as well.  I noticed though that the hosted items have a fill and a border around the whole control when they are selected in the listbox.  Setting SelectionMode = None on the RadListBox gets rid of the fill, but is there anyway to get rid of the border on the "Selected" control?

Thanks.

[Angel]

Hello Adam,

Yes, it is possible.

You have to modify the theme to disable the border for the active item. The attached archive has two modified versions of the default theme: one with a hidden border, and one with collapsed border. The difference is that when the border is hidden it takes its place around the item, but is not painted. When the border is collapsed there is no space around the item.

The names of the themes are the same as the file names.


Sincerely yours,
Angel
the Telerik team

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

[Adam]

Thanks!  You guys rock.

[William]

This is great but  I'm a little lost about how to raise an event of one of the hosted controls.  Such as in your example the click event for the two buttons.

Thanks

[Nick]

Hi Adam,

Please review the attached modified version of the sample application. I have done two changes: The first is to add public read-only properties for accessing the inner controls such as the buttons, and the second one is to add an event handler for the Click event for the first button of each row.

Do not hesitate to write me back if you have further questions.

All the best,
Nick
the Telerik team

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

[William]

Awesome!

[William]

Nick,

Do you happen to know why I might be getting an error at the add handler line when I try to add a larger amount of items?  Try adding  25 items and I think you might see what I mean.  Is there a work around?

for

(int i = 0; i < 25; i++)

error line: 

 

lbItem.Control.RadButton1.Click +=

new EventHandler(RadButton1_Click);

Thanks

 

[Nick]

Hello William,

Thank you for contacting me back.

The problem is related to the UI virtualization of the Listbox. The only solution I can think of is to replace the ListBox with a RadGridView where you can use CellFormating event to attach the event handler dynamically. Sorry for the introduced inconvenience.

Do not hesitate to write me back if you have further questions.

Regards,
Nick
the Telerik team

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