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

Multiple values in JumpList item

6 Answers 110 Views
JumpList
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Paras
Top achievements
Rank 1
Paras asked on 04 Jul 2012, 01:42 AM
Hi,
 
The sample code provided shows only 1 string, Name, for each JumpList item in the PhoneBook sample. I want to show more than 1 string for each item. For example: I want to show the name and email address of each person in the JumpList.
 
Can this be accomplished? I tried setting the ItemSource of the RadJumpList to List<People> rather than the default List<String> where People is a class with multiple properties like Name, Email, Age, Address, etc. but I get a System.InvalidCastException error.
 
A sample screenshot of what I am trying to accomplish is attached. Any sample code to accomplish this will be appreciated. I would also want to set a different image for each person.
 
Regards,
Paras Wadehra
http://www.twitter.com/ParasWadehra

6 Answers, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 04 Jul 2012, 08:53 AM
Hello Paras,

Thanks for writing.

You can easily achieve this by modifying the ItemTemplate and adding new elements that are bound to properties of your business objects to display. This is a common Silverlight scenario. Here is a quick example of how you can do this by using the same template from the Phonebook example in our Demos app:

<StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horizontal" Margin="4">
        <Image Source="/JumpList/Images/phonebook-pic.png" Width="64" Height="64" Margin="0,4,12,4"/>
        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding}" VerticalAlignment="Center"/>
    </StackPanel>
    <TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding Email}"/>
</StackPanel>

As you can see, I have extended the template by adding a root StackPanel with vertical orientation. Below the stack panel that holds the horizontally oriented image and text block that displays the name I have put another TextBlock that is bound to the Email property on my business object.

You can reuse this approach and simply update the names of the properties in the Bindings to suit the names of the properties on your business objects,

I hope this helps.

Greetings,
Deyan
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Paras
Top achievements
Rank 1
answered on 04 Jul 2012, 06:52 PM
Hi Deyan,

I tried exactly that, however, I keep getting an error when I bind the RadJumpList to my DataSource.

I get an error at the following line in my code when I do:

this.jumpList.ItemsSource = this.contacts;
where contacts is declared as:

private List<People> contacts;

and the class People is defined as:

public class People
{
    public string Name { get; set; }
    public string Email { get; set; }
}

The error I get is:

System.InvalidCastException was unhandled
  Message=InvalidCastException
  StackTrace:
       at Telerik.Windows.Data.GenericSortDescriptor`2.Compare(Object element1, Object element2)
       at Telerik.Windows.Data.SortComparer.Compare(Object x, Object y)
       at System.Collections.Generic.ArraySortHelper`1.QuickSort[TValue](Object[] keys, Object[] values, Int32 left, Int32 right, IComparer`1 comparer)
       at System.Collections.Generic.ArraySortHelper`1.Sort[TValue](Object[] keys, Object[] values, Int32 index, Int32 length, IComparer`1 comparer)
       at System.Collections.Generic.ArraySortHelper`1.Sort(Object[] items, Int32 index, Int32 length, IComparer`1 comparer)
       at System.Array.Sort[T](Object[] array, Int32 index, Int32 length, IComparer`1 comparer)
       at System.Collections.Generic.List`1.Sort(Int32 index, Int32 count, IComparer`1 comparer)
       at System.Collections.Generic.List`1.Sort(IComparer`1 comparer)
       at Telerik.Windows.Data.SortProcessor.ProcessCore(IEnumerable data)
       at Telerik.Windows.Data.DescriptorProcessor.Process(IEnumerable data)
       at Telerik.Windows.Data.RadCollectionView.CreateView()
       at Telerik.Windows.Data.RadCollectionView.RefreshOverride()
       at Telerik.Windows.Data.RadCollectionView.Refresh()
       at Telerik.Windows.Data.RadCollectionView.OnResumed(Boolean update)
       at Telerik.Windows.Controls.SuspendableObject.Resume(Boolean update)
       at Telerik.Windows.Data.RadCollectionViewSource.RefreshOverride()
       at Telerik.Windows.Data.RadListSource.Refresh()
       at Telerik.Windows.Data.RadListSource.AttachData(IEnumerable data)
       at Telerik.Windows.Data.RadListSource.SetSource(IEnumerable value)
       at Telerik.Windows.Data.RadListSource.set_SourceCollection(IEnumerable value)
       at Telerik.Windows.Controls.RadDataBoundListBox.OnItemsSourceChanged(DependencyPropertyChangedEventArgs args)
       at Telerik.Windows.Controls.RadVirtualizingDataControl.OnItemsSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
       at System.Windows.DependencyObject.RaisePropertyChangeNotifications(DependencyProperty dp, Object oldValue, Object newValue)
       at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
       at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet)
       at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value)
       at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
       at Telerik.Windows.Controls.RadVirtualizingDataControl.set_ItemsSource(IEnumerable value)
       at Telerik.Examples.WP.JumpList.PhoneBook.OnDisplayed()
       at Telerik.Examples.WP.ListExampleBase.OnLoaded(Object sender, RoutedEventArgs e)
       at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
       at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)


Can you please create a sample project where this is working and attach it or send that to me?

Regards,
Paras Wadehra
http://www.twitter.com/ParasWadehra
0
Deyan
Telerik team
answered on 05 Jul 2012, 12:25 PM
Hello Paras,

The InvalidCastException is most probably caused by the fact that you are using a wrong group key selector definition. Can you paste here the code of the group key selector so that I can make sure it is correctly defined?

Thanks for your time.

All the best,
Deyan
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Paras
Top achievements
Rank 1
answered on 05 Jul 2012, 09:46 PM
Here is all the code associated with the JumpList.

In the page constructor:
// we do not want async balance since item templates are simple
this.jumpList.IsAsyncBalanceEnabled = false;
 
// add custom group picker items, including all alphabetic characters
List<string> groupPickerItems = new List<string>(32);
foreach (char c in this.alphabet)
{
    groupPickerItems.Add(new string(c, 1));
}
this.jumpList.GroupPickerItemsSource = groupPickerItems;
 
// hook the GroupPickerItemTap event to provide our custom logic since the jump list does not know how to manipulate our items
this.jumpList.GroupPickerItemTap += this.OnJumpList_GroupPickerItemTap;
 
// add the group and sort descriptors
GenericGroupDescriptor<string, string> groupByFirstName = new GenericGroupDescriptor<string, string>(contact => contact.Substring(0, 1).ToLower());
this.jumpList.GroupDescriptors.Add(groupByFirstName);
 
GenericSortDescriptor<string, string> sort = new GenericSortDescriptor<string, string>(contact => contact);
this.jumpList.SortDescriptors.Add(sort);

and,

private void OnJumpList_GroupPickerItemTap(object sender, GroupPickerItemTapEventArgs e)
{
    foreach (DataGroup group in this.jumpList.Groups)
    {
        if (object.Equals(e.DataItem, group.Key))
        {
            e.DataItemToNavigate = group;
            return;
        }
    }
}

and the XAML is,
<telerikDataControls:RadJumpList Grid.Row="1" x:Name="jumpList" IsStickyHeaderEnabled="True">
    <telerikDataControls:RadJumpList.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="4">
                <Image Source="/JumpList/Images/phonebook-pic.png" Width="64" Height="64" Margin="0,4,12,4"/>
                <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Name}" VerticalAlignment="Center"/>
                <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Email}" VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </telerikDataControls:RadJumpList.ItemTemplate>
    <telerikDataControls:RadJumpList.GroupHeaderTemplate>
        <DataTemplate>
            <Border Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4" BorderThickness="0">
                <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
            </Border>
        </DataTemplate>
    </telerikDataControls:RadJumpList.GroupHeaderTemplate>
    <telerikDataControls:RadJumpList.StickyHeaderTemplate>
        <DataTemplate>
            <Border BorderThickness="0" HorizontalAlignment="Stretch" Background="{StaticResource PhoneBackgroundBrush}" Padding="0, 0, 0, 8">
                <Border VerticalAlignment="Top" Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4, 4, 4, 4" BorderThickness="0">
                    <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                </Border>
            </Border>
        </DataTemplate>
    </telerikDataControls:RadJumpList.StickyHeaderTemplate>
    <telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>
        <local:PhoneBookTemplateSelector x:Name="templateSelector">
            <local:PhoneBookTemplateSelector.LinkedItemTemplate>
                <DataTemplate>
                    <Border Background="{StaticResource PhoneAccentBrush}" Width="96" Height="96" Margin="6">
                        <TextBlock Margin="8" Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                    </Border>
                </DataTemplate>
            </local:PhoneBookTemplateSelector.LinkedItemTemplate>
            <local:PhoneBookTemplateSelector.EmptyItemTemplate>
                <DataTemplate>
                    <Border Background="{StaticResource PhoneChromeBrush}" Width="96" Height="96" Margin="6" IsHitTestVisible="False">
                        <TextBlock Margin="8" Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="{StaticResource PhoneDisabledBrush}"/>
                    </Border>
                </DataTemplate>
            </local:PhoneBookTemplateSelector.EmptyItemTemplate>
        </local:PhoneBookTemplateSelector>
    </telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>
    <telerikDataControls:RadJumpList.GroupPickerItemsPanel>
        <ItemsPanelTemplate>
            <telerikPrimitives:RadWrapPanel Margin="8,30,0,0" ItemWidth="115" ItemHeight="106"/>
        </ItemsPanelTemplate>
    </telerikDataControls:RadJumpList.GroupPickerItemsPanel>
</telerikDataControls:RadJumpList>

Thanks for your help so far.

Regards,
Paras
http://twitter.com/ParasWadehra
0
Paras
Top achievements
Rank 1
answered on 06 Jul 2012, 06:05 AM
Hi Deyan,

One more thing to add: Eventually I also want to show a context menu on each of the items of the RadJumpList control, and the items in the context menu could differ (could be 1 out of 2 preset menu options) based on some status of the item in the list.

Can you please also include an example to do this?

Regards,
Paras
0
Victor
Telerik team
answered on 09 Jul 2012, 07:20 AM
Hello Paras,

Thank you for writing.
Please have a look at our examples application. You should have its source code as part of the RadControls installtaion. You need to see the Different Menus example, its code does precisely what you require. Also please see this help topic, it also describes how to implement your scenario.

Please write again if you have other questions.

Regards,
Victor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
JumpList
Asked by
Paras
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Paras
Top achievements
Rank 1
Victor
Telerik team
Share this question
or