Evaluating: First time with Telerik Xamarin, need sample with Treeview

[Johnny]

Hi there,

I am evaluating the Telerik Xamarin controls for our project. This is the first time i am working with Telerik Xamarin controls. Basically, the first demo i need to make is a simple iOS app with TreeView (DataBinding) as navigation menu, for each node click in the TreeView menu, it opens a content page for editing (save and cancel). I tried to download and rebuild the tagit sample code package, unfortunately there were a lot of build errors which i don't know how to fix them. Could you guys help me out to make a simple example for me?

Regards

[Lance | Senior Manager Technical Support]

Hi Zhonghai,

I apologize for any frustration you've had with the Tagit demo. I've just finished updating it and we'll be rolling out the update soon (both the in-store version and the project download). 

Regarding the TreeView, let's get you up and running quickly with some demos.


SDK Examples Browser

First, the best place to look at demos from the controls is in the SDKExamples Browser app. This is already on your machine, installed to where you've installed Telerik UI for Xamarin to.

If you used the default installation folder, they'll be at the following location: C:\Program Files (x86)\Progress\Telerik UI for Xamarin R3 2018\Examples\Forms

1 - Open the solution in Visual Studio and
2 - Drill down to the Portable project -> Examples folder for all the controls' demos.
3 - In the Examples -> TreeViewControl folder you'll find 3 subfolders, each with different demos you can explore.


QSF Demo

Another demo you can review is the QSF demo. This is a different style demo, where we focus more on a few features to give a very specific, polished, end-user experience. 

You can also find these installed on your machine as well at the following location: C:\Program Files (x86)\Progress\Telerik UI for Xamarin R3 2018\QSF. Just like the SDKExamples demo, drill down to the Portable project -> Examples -> TreeViewControl folder for more examples.


Documentation

Finally, you'll find information about the TreeView usage in the TreeView Documentation. For example, there's a tutorial in the Getting Started page that will get you up and running.


Further Assistance

If you have any trouble implementing the TreeView, open a support ticket here and share the code you've used, along with a summary of what's not working, and the TreeView engineers will assist further.

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

[Johnny]

Morning Lance,

many thanks for your great support. Now i managed to open the demo SDKBrowser solution.All the features looks great for me at this moment. Could you please make a very simple demo iOS app for me demonstrating the following requirements?

01. TreeVIew as navigation menu

02. Click leaf node to open a content page for text edit (save and cancel)

03. Be able to mark a leaf node as done, if all leaf nodes are marked as done, their parent should be marked as done as well.

04. be able to search the nodes

I need it for a presentation, please help me to achieve that, many thanks again.

Regards

[Lance | Senior Manager Technical Support]

Hello Zhonghai,

Building a complete custom application falls outside the scope of support, we have partners that can do this, contacts the folks at Custom App Development. I can, however, provide you with some tips and resources to build this out and  accomplish your goals.

I recommend starting with the Xamarin.Forms Master-Detail project template (File > New  > Xamarin.Forms > MasterDetail), that way you already have a NavigationPage as the root. You can then put the RadTreeView in the MasterPage.





Then in the MenuPage.xaml, you can replace the ListView with the TreeView


01. TreeVIew as navigation menu

You are in complete control over the items that are presented in the TreeView. See SourceCollection property in this documentation: Getting Started. As you can see, you can define your data model as you see fit.

Using the plain XamarinForms MasterDetail template as an example, you can replace the ListView in MenuPage.xaml with the RadTreeView


02. Click leaf node to open a content page for text edit (save and cancel)

The TreeView has an ItemTapped event, 

<dataControls:RadTreeView ItemTapped="RadTreeView_OnItemTapped"/>

In the tapped event you can get a reference to the tapped item. 

private async void RadTreeView_OnItemTapped(object sender, TreeViewItemEventArgs e)
{
    var tappedItem = (HomeMenuItem)e.Item;

    var id = (int)tappedItem.Id;

    await RootPage.NavigateFromMenu(id);
}

 The code above is continuing on with the plain Xamarin Master-Detail example.


03. Be able to mark a leaf node as done, if all leaf nodes are marked as done, their parent should be marked as done as well.

I'm not sure how this relates to Page navigation. But to get this functionality, you have two options,

1 - Use the built-in checkbox elements as an identifier for the "Done" value, with which you can also use the CheckBoxMode Propagate. See this documentation: Checkbox Element. 

2 - Build a custom approach by adding an IsDone property to your model and defining a completely custom ItemTemplate (as seen in the TreeView Flags examples) 

public class HomeMenuItem : BindableBase

{

    private bool _isDone;



    public MenuItemType Id { get; set; }

 

    public string Title { get; set; }

 

    public bool IsDone

    {

        get => _isDone;

        set => SetProperty(ref _isDone, value);

    }

}

To toggle the IsDone value, you can do this from anywhere in the application that has access to that item. For example, the TreeView has ItemHold event, 

<dataControls:RadTreeView  ItemHold="MyTreeView_OnItemHold" >

In which you could toggle that IsDone value: 

private void MyTreeView_OnItemHold(object sender, TreeViewItemEventArgs e)
{
    (e.Item as HomeMenuItem).IsDone = !(e.Item as HomeMenuItem).IsDone;
}

04. be able to search the nodes

This is not a feature of the TreeView. If you want to search the items, just search the bound collection itself using regular C# techniques.

For example, if the bound items were names "MenuItems, then you can us LINQ to find a match:

public ObservableCollection<HomeMenuItem> MenuItems { get; set; }

private HomeMenuItem SearchMenuItems(string titleToFind)
{
    var match = MenuItems.FirstOrDefault(m => m.Title == titleToFind);
    return match;
}

To give you a head start, I've attached a plain Xamarin.Forms MasterDetail project with the ListView swapped out for a TreeView. See MenuPage.xaml and MenuPage.xaml.cs for the relevant logic.


Further Assistance

If you have any problems with specific TreeView features, please open a Support Ticket here and attach the code you're using so that the TreeView support team can assist further. Keep in mind that custom development requests for unrelated features are out of scope, but they'll be able to help with any TreeView specific property or feature (things like selection, templates, etc).

I hope I was able your questions.

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

[Johnny]

Hey Lance,

thanks so much for that. This is already very helpful for me to get started. 

Again, thanks for your great support.

Regards