This question is locked. New answers and comments are not allowed.
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
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
0
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:
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
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:
and the class People is defined as:
The error I get is:
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
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:
where contacts is declared as:this
.jumpList.ItemsSource =
this
.contacts;
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
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
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:
and,
and the XAML is,
Thanks for your help so far.
Regards,
Paras
http://twitter.com/ParasWadehra
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
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
Hello Paras,
Victor
the Telerik team
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.
Victor
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>