[Solved] Grouping in RadDataBoundListBox. Not possible?

[Stefan]

Hi,

I am just playing with the RadDataBoundListBox as substitue for the LongListSelector (WP8 project). Is is right, das RadDataBoundListBox does not support grouping like the LongListSelector (including group header- and footer-templates)?

[Deyan]

Hi Stefan,

Thanks for writing.

You should be looking at the RadJumpList control for that purpose:

http://www.telerik.com/help/windows-phone/radjumplist-overview.html

RadJumpList exposes the GroupDescriptors property which you can use to group the items from your data source.

Regards,
Deyan
Telerik

[Stefan]

Hi,

I am using RadDataBoundListBox because of the nice re-order feature. Is this possible with RadJumpList as well?

[Stefan]

I was hoping to solve the problem by using RadDataBoundListBox inside RadDataBoundListBox...

<telerikPrimitives:RadDataBoundListBox IsCheckModeEnabled="False" ItemsSource="{Binding Items}">

    <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
        <DataTemplate >
            <telerikPrimitives:RadDataBoundListBox IsCheckModeEnabled="False" IsItemReorderEnabled="True" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
                    <DataTemplate >
                        <StackPanel Orientation="Horizontal" Margin="12" toolkit:TiltEffect.IsTiltEnabled="True">
                            <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" />
                        </StackPanel>
                    </DataTemplate>
                </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            </telerikPrimitives:RadDataBoundListBox>
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.ItemTemplate>

</telerikPrimitives:RadDataBoundListBox>

As you can see I am using a RadDataBoundListBox to diplay a group inside the ItemTemplate of a RadDataBoundListBox. While the outer ListBox uses IsItemReorderEnabled=False the inner ListBox uses IsItemReorderEnabled=True.

Problem 1:
Almost anything works fine except one thing: When I tap and hold an Item it comes up to be re-ordered. But no re-order Buttons are shown. Thus the item cannot be moved up or down.

Problem 2:
The Windows Phone Toolkit TileEffekt does not work inside the Databound Listbox. Any idea why?

[Stefan]

OK, I figured out what the source of Problem1 is:
The re-order controls are always shown at the bottom of the ListBox. In my example scrolling of the inner ListBoxes is disabled and only the outer ListBox is allowed to scroll. If an inner Listbox hold so many items that it is higher than the screen, the re-order controls are shown at the bottom of the ListBox an thus out of sight. Only when scrolling down to the bottom of the list view the re-order controls are visible.

Because of this the problem also shows up when the DataBoundListBox is embedded in other scrolling controls like LongListSelector, ListBox or ScrollViewer.

Is it somehow possible to influence the position where the re-order controls are located? Maybe using a style? It would be best to position the controls at the bottom of the List OR at the bottom of the screen, depending on what comes first...

[Deyan]

Hi Stefan,

Thanks for writing.

The inner DataBoundListBox displays the reorder interface as it normally works. Since the inner listbox has no way to understand that it is in another listbox and no way to know what the outer listbox' scroll-offset is, it is not possible to dynamically adjust the position of the buttons.

Can you please elaborate a bit further on what scenario you want to implement so that we can evaluate it and be able to assist you further.

Regards,
Deyan
Telerik

[Stefan]

Assume an app should manage a collection of persons. When the user creates a "person" entry he should be able to select the persons name from a pre-defined list. This list is grouped into male names and female names. Thus I need to show a grouped List of names:

Male
  John
  Jack
  Bill
Female
  Linda
  Lisa
  Carla

This is not a big deal and could easily be done using a long list selector. But additionally the user should be able to re-order the names within the list to move the ones that are used often to the top. Therefore I need some kind of control to order the names within one group. Moving names between different groups sould not be possible.

As described a list of RadDataBoundListBoxes is pretty much the thing I am looking for. The only problem is, that it does not work :-)

[Deyan]

Hello Stefan,

Thanks for getting back to me.

The RadDataBoundListBox is a plain listbox control meant to be used with flat lists of data. The RadJumpList control is the control that supports data operations.

RadJumpList does not support item reorder since this mode is not relevant when you have data operation like grouping or filtering within the control. In other words, we do not know how to position the reordered items within the native data source when you have a data operation.

The Item Reorder functionality is currently usable when your DataBoundListBox is a root-level control, i.e. it is not nested within any other scrollable controls.

For the time being, my suggestion would be to rethink your UX scenario.

Let me know if you have additional questions.

Regards,
Deyan
Telerik