BuyLog In
Ticket T1285452
Visible to All Users

Blazor TreeView with Templates - How to add hovering and selection highlighting

created 5 days ago

Hi,

I'm trying to extend the Templates example on your demo page (https://demos.devexpress.com/blazor/treeview) as follows:

  • add a hovering effect for the leaves only, but not for the parent node (I have two levels only, as in your example)
  • hightlight the selected node. Again, only the leaves should be selectable, but not the parent nodes

Could you please point out how to achieve this? Thank you very much!

Sign in to comment on this post

Answers approved by DevExpress Support

created 4 days ago

Hi,

To disable the selection effect and hovering in the parent nodes, you can use the following CSS rules:

Razor
<DxTreeView AllowSelectNodes="true"
            SelectionChanged="@SelectionChanged"
            AnimationType="LayoutAnimationType.Slide">
    <Nodes>
        <DxTreeViewNode Text="Metals" CssClass="parent-node">
            <Nodes>
               ...
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Text="Metalloids" CssClass="parent-node" />
        <DxTreeViewNode Text="Nonmetals" CssClass="parent-node">
            <Nodes>
                ...
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>























CSS
.parent-node >
div.dxbl-treeview-item-content >
div.dxbl-active{
    background-color: unset !important;
    color:unset !important;
} 

.parent-node >
div.dxbl-treeview-item-content >
div.dxbl-treeview-item-container::before{
    background-color: unset !important;
}

I attached a sample project for your reference.

Note: This solution is based on a non-documented inner structure that can be changed in future releases. So, please thoroughly test it after DevExpress updates.

Let me know if this meets your requirements.

Regards,
Gian

    Comments (2)
    H H
    Hirnilein 4 days ago

      Thanks Gian,

      My question was based on the Templates example on your demo page (https://demos.devexpress.com/blazor/treeview), which does not provide visual feedback for hovering and selection, so the question is:

      How can I add visual feedback for hovering and selection to this example, which uses Templates?
      How can I suppress this added visual feedback for parent nodes?

      Thanks

      GP GP
      Gian Pascual (DevExpress Support) 3 days ago

        Hi,

        Thank you for the clarification.

        To add visual feedback for hovering and selection, you can utilize CSS. Within your template, wrap the content of child nodes in a <div> and apply the :hover pseudo-class selector as follows:

        Razor
        <div class="d-flex p-2 highlight-onhover">
    <div class="flex-shrink-0 me-3">

    </div>
    <div class="flex-grow-1">
        <h5 class="mt-0">@dataItem.Title</h5>
        @dataItem.Description
    </div>
</div>
        CSS
        .highlight-onhover:hover{
background-color: yellow;
}

        To introduce visual feedback for selection, capture the SelectionChanged event to retrieve the DataItem and apply a specific CSS class based on selection:

        C#
        ComponentSet SelectedComponent = new ComponentSet("","");

void OnSelectionChanged(TreeViewNodeEventArgs e)
{
    SelectedComponent = e.NodeInfo.DataItem as ComponentSet;
    StateHasChanged();
}
        Razor
        <div class="d-flex p-2 highlight-onhover @(dataItem == SelectedComponent ? "selected-item" : "")">
    <div class="flex-shrink-0 me-3">

    </div>
    <div class="flex-grow-1">
        <h5 class="mt-0">@dataItem.Title</h5>
        @dataItem.Description
    </div>
</div>
        CSS
        .selected-item{
background-color: red !important;
}

        I attached a sample project for your reference.

        Please let me know if the solution meets your requirements.

        Regards,
        Gian

        Sign in to comment on this post

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.