Hierarchical Nodes & Identity Roles

1 Answer 49 Views
Drawer
cmarsh
Top achievements
Rank 1
Iron
cmarsh asked on 02 Feb 2023, 03:39 PM

We are looking at swapping out the SyncFusion Sidebar for the Telerik Drawer. Currently, we use the Sidebar to hold a Telerik Treeview. This has become unwieldy as more nodes have been added and managing the Responsive needs. We just can't seem to get the right balance between the Treeview on the desktop browser and the mobile browser.

So a few quick questions:

  1. It would appear that the Drawer would accomplish both of these tasks. Correct? 
  2. If the above is correct, can we have more than one node expanded or does it always close the last selected node like in the demo?
  3. Can we apply code to show/hide the node based on Security (Identity) Roles?
  4. Lastly, can we search the drawer for a node? For example, right now we have a Search box allowing the user to quickly type for a menu item.

Thank you!

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 07 Feb 2023, 02:49 PM

Hello Chris,

Let me address your questions below:

  • In general, the Drawer works with flat data but you can implement a hierarchy structure with some custom implementation like in the Hierarchical Drawer Demo. 
  • Since the hierarchy structure requires custom implementation you have to manage which element when will be displayed. If you want to expand more elements you can implement your logic in a similar way as in the following REPL example.
  • Regarding the Identity, you can mark the records that the Drawer uses with a bool property. Thus if the user is not in a specific role you can decide if you want to include the item in the collection that the Drawer uses e.g. 

// Include the bool property in the model 
   public class DrawerItem
    {
...
        public bool ShouldBeVisibleByAdminOnly { get; set; } = false;

// When you gather the data, filter the items in a different way based on a condition 
    protected override void OnInitialized()
    {
        if(UserIsAdmin == false)
        {
            Data = GetData().Where(x => x.ShouldBeVisibleByAdminOnly == false).ToList();
        }
        else
        {
            // user is admin so get all items
            Data = GetData();
        }
  • The Search functionality is achievable. You have to implement a TelerikTextBox and hook up for its OnChange event. Thus when the user types in the input field you can use the value to filter the collection to which the Drawer is bound. 

    void OnChange(object searchTerm){
        var value = (string)searchTerm;

        Data=Data.Where(x=>x.Text.Contains(value));
    }

I've prepared a REPL example to demonstrate the approach.

I hope this helps. In case you have any other questions, please do not hesitate to contact us.

Regards,
Yanislav
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Tags
Drawer
Asked by
cmarsh
Top achievements
Rank 1
Iron
Answers by
Yanislav
Telerik team
Share this question
or