JumpList in DataForm

[Rob]

Is it possible to have a JumpList as the editor in a DataForm? I have a DataField defined as follows:

                     <telerikInput:DataField TargetProperty="UserStreetName" Header="Street">
                        <telerikInput:DataField.EditorStyles>
                            <Style TargetType="telerikInput:RadListPicker">
                                <Setter Property="PopupHeader" Value="Street"/>
                                <Setter Property="DisplayMemberPath" Value="Id" />
                                <Setter Property="SelectedValuePath" Value="Id" />
                            </Style>
                        </telerikInput:DataField.EditorStyles>
                    </telerikInput:DataField>

 But due to the large number of items in this particular ListPicker, it is difficult to scroll through thousands of items to find the correct one. Is it possible to display a JumpList instead? I would like it to be able to present the user with a jumplist, similar to the "phone book" sample in the "Telerik Examples" app

[Ivaylo Gergov]

Hello,

Here you can find how to create CustomEditors.

I hope this helps.

Regards,
Ivaylo Gergov
Telerik

[Rob]

Hello,

I have reviewed the information provided regarding custom editors, and I have attempted unsuccessfully to implement my desired functionality.

Can you provide some guidance on how I would go about getting a custom editor to "popup". I need the custom editor to popup, similar to the way RadListPicker pops up to allow selection. Once it pops up, this custom editor would display something similar to the attached image. I am trying to implement a way that the user could filter a large list, based on typing the first few characters (rather than scroll through thousands of items.

Thanks

-Rob

[Ves]

Hi Rob,

I have attached an updated version of the DataForm example from our QSF (found in C:\Program Files (x86)\Telerik\UI for Windows Phone 8 folder). This version features an updated template of RadListPicker, which uses RadJumpList with a group descriptor. Tthis approach relies on the fact, that there is a control in RadListPicker's template, that is named PopupList and it is of type RadDataBoundListBox (RadJumpList inherits from it).

You can extend this approach further by adding additional controls and features to the RadListPicker custom template, keeping the above requirement satisfied.

Best regards,
Ves
Telerik

[Rob]

Hello, thanks for the template. It is very helpful.

Below is my attempt at using the template to accomplish the filtering functionality. This code "works" but is not very reusable. The filtering currently is being done at the page level, not as a custom editor.

I am not seeing a way to refactor this functionality into a custom editor, due to the following.

-Can't see a way to use the template you provided as a part of a user control/custom editor.
-Don't see a way to "get at" the associated RadDataField properties (to determine bindings, i.e. which IGenericListFieldInfoProvider is associated with the bound field on my model [GenericListEditor])

I am hoping to use this functionality in all of my list driven dataform fields, but my current approach is inelegant. Any suggestions on how to get this into a custom editor?

Thanks
-Rob

FirstLook.xaml
                        <telerikPrimitives:RadWindow.Content>
                            <Grid 
                                    Background="{StaticResource PhoneChromeBrush}"
                                    telerikCore:RadTileAnimation.ContainerToAnimate="{Binding ElementName=PopupList, Path=.}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <ContentControl Grid.Row="0" CacheMode="BitmapCache"
                                            Content="{TemplateBinding PopupHeader}"
                                            ContentTemplate="{TemplateBinding PopupHeaderTemplate}"
                                            Style="{TemplateBinding PopupHeaderStyle}" />
                                <telerikPrimitives:RadTextBox Grid.Row="1" x:Name="search" Watermark="search" TextChanged="search_TextChanged"/>
                                <telerikData:RadJumpList Grid.Row="2" x:Name="PopupList"
                                            telerikCore:InteractionEffectManager.IsInteractionEnabled="True"
                                            Style="{TemplateBinding PopupStyle}"
                                            IsCheckModeActive="False"
                                            DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                            ItemContainerStyle="{TemplateBinding PopupItemStyle}"
                                            CheckModeDeactivatedOnBackButton="False" >
                                </telerikData:RadJumpList>
                            </Grid>
                        </telerikPrimitives:RadWindow.Content>



Firstlook.xml.cs

        Dictionary<String, IEnumerable> masterlists = new Dictionary<string, IEnumerable>();
        
        private void search_TextChanged(object sender, TextChangedEventArgs e)
        {
            // the textbox text changed (user is "filtering" the list)
            RadTextBox searchbox = (RadTextBox)sender;
            // the text that the user typed
            String filter = searchbox.Text.ToUpper();

            // try to find the jumplist
            RadJumpList jumplist = (RadJumpList)searchbox.FindName("PopupList");

            // try to find the header, I will use this to try to track the full list, before filtering
            ContentControl header = (ContentControl)searchbox.FindName("HeaderPresenter");
            String listid = header.Content.ToString();

            // keep track of all "full lists" (need to do this because user may backspace in the TextBox and will need to restore the list to what it was originally, prior to filtering)
            if (masterlists.ContainsKey(listid) == false)
            {
                masterlists[listid] = jumplist.ItemsSource;
            }

            // filter based on what was typed in the text box
            var temp = masterlists[listid];
            List<String> filtered = new List<string>();
            foreach(var x in temp)
            {
                if (x.ToString().ToUpper().StartsWith(filter))
                    filtered.Add(x.ToString());
            }
            jumplist.ItemsSource = filtered;
        }

[Ves]

Hi Rob,

You can place the template in App.xaml and reuse it across the application. You can eliminate the TextChanged event handler by databinding the FilterDescriptorsSource property of RadJumpList to search textbox's Text property with a converter. I have attached the updated version of the page along with App.xaml.

Best regards,
Ves
Telerik