phonebook application

[Rene]

Hi,

i am thinking about a phonebook app for hour business software and i am not sure how to start. Using a TabControl for A-Z and just load data which
are in this chapter. Any ideas?

 

Thanks

Rene

[Lance | Manager Technical Support]

Hello Rene,

You could absolutely use the RadTabControl because it supports advanced data binding mechanisms. See this section in the documentation where we show you how to use a binding for the tab source. You can use LINQ to group your person list, then use the group Key as the header (which would be the letter) and set the content using the List<Person>. 

Alternatively, you take a look at using the RadGridView and leverage the built-in sorting, grouping and filtering. RadGridView is very commonly used to display a list of people (e.g employees, Customers, etc).

Just as a small demo, I've attached an example that actually uses both. A RadTabContol renders a tab for each letter group and in the Tab is a RadGridView for all the people who's first name begins with that letter.

Here's a screenshot of the result:




NOTE: I'm using the RadGridViewin each tab as example of how you can bind a list to it, for performance reasons I really don't recommend a RadGridView for each tab. Either use on RadGridView for everyone or use a ListView in the tab to list the people.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Rene]

Hi Lance,

thanks so much, that's it!

 

have a nice day

Rene

[Rene]

Hi,

one more question. how do i get the selected person on doublecklick in the radGridView?

 

thanks

R

[Lance | Manager Technical Support]

Hello Rene,

You can find a solution to that here.

If you'd like to see more information on the built-in selection mechanisms, see here.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Rene]

Hi,

not what i'm looking for but i'll find out.

one more question how you create the tabs in the phonebook

Dictionary<string, List<Person>> groupedPeople = people.GroupBy(g => g.Name.Substring(0, 1)).ToDictionary(g => g.Key, g => g.ToList());

 

The Problem ist:

1) MyList is not form A to Z - so how can i Sort the Tabs from A-Z?

2) Second Problem the Names can beginn with "a" or "A" so  two Tabs? how can i solve this in the code?

Thanks

Rene

[Rene]

Hi,

i can't get the selected Person out of the TabControl. Please, how do i select the person in your example?

Thanks

Rene

[Lance | Manager Technical Support]

Hello Rene,

The RadTabControl is just using the result of your LINQ query. The example code I use is not intended for production, but rather just to show you that the TabControl will render whatever you give it for an ItemsSource.

Regarding your items #1 and #2

Unfortunately, constructing LINQ queries is considered general programming and is outside the scope of Telerik Support. You can learn more about LINQ here, I also recommend checking out this great LINQ course on Pluralsight (you can get a free on month trial membership)

Although I can't tell you how to construct your LINQ queries, I can point you in the right direction. In my example, the ObservableCollection<TabItemModel> Tabs is the items source for the TabStrip and I populate using the following LINQ statement:

var groupedPeople = people.GroupBy(g => g.Name.Substring(0, 1)).ToDictionary(g => g.Key, g => g.ToList());

That groups all the items in the people list by the first letter. If you want to ignore case of that letter, then you need to handle it before sorting. Here's an example of setting it to uppercase, this will get everyone in the list under the same letter regardless of case

people.GroupBy(g => g.Name.Substring(0, 1).ToUpperInvariant()).ToDictionary(g => g.Key, g => g.ToList())

Regarding your question about selection

We need to first address that you're still using the GridView in the TabStrip. I stated that using the GridView within the TabStrip is not recommended. You should choose either GridView or TabStrip

I have updated my demo to show you how to use RadListView and how to handle the selected person in the ListBox.

Here's the XAML

<telerik:RadTabControl ItemsSource="{Binding Tabs}"
         SelectedItem="{Binding SelectedTab, Mode=TwoWay}">
    <telerik:RadTabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Letter}" />
         </DataTemplate>
     </telerik:RadTabControl.ItemTemplate>
     <telerik:RadTabControl.ContentTemplate>
       <DataTemplate>
          <Grid>
           <telerik:RadListBox ItemsSource="{Binding GroupedPeople}"
                SelectedItem="{Binding ElementName=Page, Path=DataContext.SelectedPerson, Mode=TwoWay}"
                ItemTemplate="{StaticResource PeopleTemplate}" />
            </Grid>
     </DataTemplate>
  </telerik:RadTabControl.ContentTemplate>
</telerik:RadTabControl>

Here's a Screenshot




Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Rene]

Hi,

thanks for this great example,helped a lot. Last Question. how do i add a Scrollbar in the Content?

Thanks

[Lance | Manager Technical Support]

Hi Rene,

The RadListBox already has a scrollbar, it only renders when the content is longer than the visible area.

If you're referring to a different kind of content, place it in a ScrollViewer.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress