Search code examples
dotvvm

Loading subcategories in TreeView on click Dotvvm

I use business pack treeview component for menu. My goal is to retrieve only top level menu without subcategories. Subcategories will show only on user icon click (+ / - icons) or on menu item click.

So basically when I click on "a" or icon binded to this menu object, I want to send request to my server to get his subcategories and so on. I dont want to get everything in one request.

enter image description here

As I noticed there are two click handlers in view.

1) Use Changedproperty - when I use this property to handle click events, I successfully get correct object into my CategorySelectedList, but it only register clicks directly on text label. For icon it doesnt work anymore and also category menu will not expand.

2) Use Events.Clickproperty - when I use this property to handle click events. I dont even get correct object into my CategorySelectedList property, but category menu will expand in this case.

I cant send object Id from my view into SetActiveMenuNode method so I have to take it directly from my CategorySelectedList but each aproach has his own problems.

Is there any solution for this?

ModelView

public List<CategoryListDTO> AdminMenuList { get; set; } = new List<CategoryListDTO>();
public List<CategoryListDTO> AdminMenuSelectedList { get; set; } = new List<CategoryListDTO>();
public void SetActiveMenuNode()
{
    var selected = AdminMenuSelectedList.FirstOrDefault();
}

//načítání podkategorií 
public StaticCommandBindingExpression LoadChildren { get; set; } = new StaticCommandBindingExpression(new CompiledBindingExpression( //something here));

My view

<dot:Content ContentPlaceHolderID="MainContent">
<section class="content">
    <bp:TreeView DataSource="{value: AdminMenuList}"
                 SelectedValues="{value: AdminMenuSelectedList}"
                 ItemKeyBinding="{value: Id}"
                 ItemHasChildrenBinding="{value: HasCategories}"
                 ItemChildrenBinding="{value: AssignedToCategory}"
                 LoadChildren="{staticCommand: _parent.MyMethod()}"
                 Changed="{command: SetActiveMenuNode()}"          
                 >
        <p>{{value: Name}}</p>
    </bp:TreeView>
</section>

Solution

  • Unfortunately there is no solution right now. We have this feature in our backlog and will implement it when possible.

    We have implemented this feature in version 1.1.5-rc1. The TreeView control has a new property LoadChildren of type StaticCommandBindingExpression. Here is an example on how to use it.

    ViewModel.cs

    [AllowStaticCommand]
public static IEnumerable<Item> LoadChildren(Item parent)
{
    return LoadYourChildrenFromSomewhere(parent.Id);
}

    View.dothtml

    <bp:TreeView LoadChildren="{staticCommand: ViewModel.LoadChildren(_this)}" />

    Please note that DI is not yet supported for static commands (it's coming). You need to create the required services yourself or resolve them from global service provider.