Multiple values in JumpList item

7 posts, 0 answers
  1. Paras
    Paras avatar
    11 posts
    Member since:
    May 2011

    Posted 03 Jul 2012 Link to this post

    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
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 04 Jul 2012 Link to this post

    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 >>

  3. DevCraft banner
  4. Paras
    Paras avatar
    11 posts
    Member since:
    May 2011

    Posted 04 Jul 2012 Link to this post

    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
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 05 Jul 2012 Link to this post

    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 >>

  6. Paras
    Paras avatar
    11 posts
    Member since:
    May 2011

    Posted 05 Jul 2012 Link to this post

    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
  7. Paras
    Paras avatar
    11 posts
    Member since:
    May 2011

    Posted 06 Jul 2012 Link to this post

    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
  8. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 09 Jul 2012 Link to this post

    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 >>

Back to Top
DevCraft banner