This post will get you familiar with the TreeView component in the Telerik UI for Xamarin suite – how it can be used, some of its key features and how to set it up for your mobile applications.
One of the reasons the TreeView component (AKA,
RadTreeView) was created is to cover the scenarios where a hierarchical data presentation is needed. Of course, this is not the only scenario in which the control can be used, but it is the best fitting one.
The control features the following built-in functionalities:
- Hierarchical navigation
- Expand/collapse APIs
- Commands support
- CheckBox support
- UI Virtualization
- Customization capabilities via ItemTemplateSelectors
We will take a closer look at the Customization example from our TreeView QSF (quick start framework) and see how the TreeView is configured.
Defining the Scenario
The example shows all cities worldwide in which an organization has at least one office. The cities are grouped by their country, and the countries are grouped by their continent.
Setting up the Data
The two most important steps here are providing the
HierarchyAdapter. In other words, users should provide the raw data that will be visualized and an adapter which can retrieve the children of each data entry. Based on this, the
RadTreeView creates the hierarchy. In the example below the
ItemsSource is a simple
ObservableCollection containing business objects describing a continent.
RadTreeView will only display the root level items of the
ItemsSource. To properly display the hierarchy, the
Telerik.XamarinForms.Common.IHierarchyAdapter interface must be implemented. It has two methods –
GetItems(), the adapter should return all children of the item passed as the only parameter. The
GetItemAt() should return a specific child of a provided item. For more details you can refer to the source code of the example. Once these steps are made the hierarchical data will be visualized.
Most likely at this point the visualized result will not fit your design requirements. That is because when no
ItemTemplateSelector is applied, the
RadTreeView will render whatever the
ToString() method of each business item returns. To beautify the visualization, additional steps should be taken.
Creating Item Templates
Now that the data is set, we can proceed with customizing the look of the items. The
RadTreeView allows you to apply a different
DataTemplate for each item through a
DataTemplateSelector. In the example this is achieved by the
ItemTemplateSelector class. The specific implementation can be seen in the GitHub repo. As you can see, in addition to the selecting logic the class exposes several properties of
DataTemplate. This allows setting the properties in XAML like so:
<!-- ... -->
<!-- ... -->
<!-- ... -->
Admiring the Result
In the different
<DataTemplate> declarations, you can create the required design for each of the items in the hierarchy. Once this is done you can sit back, relax and enjoy your work.
Now you should be able to properly feed data to the
RadTreeView as well as to implement a custom design for the items. As always, more information about the rest of the features of the component can be found in our online documentation. You can also share your feedback and suggestions for the suite through the Feedback Portal.
If this is the first time you are hearing about the Telerik UI for Xamarin suite and want to try it our for your mobile application development, you can do so by going to the website or directly downloading a free trial.
Thanks and happy coding!