Unexpected tree issues

I spent a few hours today experimenting with the Blazor Tree for the first time. The results are quite encouraging, except some strange issues I can't solve are blocking me from using it in our new app.

  • The default.css styles seem to conflict with Bootstrap 4. Primary buttons (btn-primary) turn orange and cards have their margins expanded and the contents are distorted.
  • My HasChildren lambda is working correctly but all nodes including leaf nodes have the expand and collapse icon on them, so it's as if HasChildren is always true. I even hard-coded false for the return value and all nodes remain expandable.
  • The tree items are double-spaced and I can't find a way of decreasing the vertical spacing.

Any advice on these issues would be most welcome. Thanks, Greg

Hi @gfkeogh,

Check this demo for more info about HasChildren:

You can use also your browser dev tools to know which CSS class to modify to reduce the space between items:

Check this thread for more info on how to use themes without Bootstrap:

Thanks for the quick reply. I have some results following your advice.

  • [Solved Workaround] The HasChildren function has no affect whatever when I am loading the tree by binding to a nest of node-like objects. I tried dozens of experiments but the result is always as if HasChildren => true is the result and all nodes including leaf nodes have expand icons. By following the Files and Directories samples exactly (I must stress that!) and loading on-demand I finally got the result I need that looks very similar to the sample. I also had to set a template to get icon and text like the sample. So I solved this problem with the workaround of not using recursive binding and following the on-demand sample exactly.

  • [Solved] I had already used Chrome's inspector to find that the ui-treenode-content class was producing the double spacing, but my attempts to override it did nothing. This morning I find that setting class padding:0 from yesterday is now working, so it was just cached.

  • [Pending] Referencing the default-base.css has no effect upon the conflicts with Bootstrap 4 styles. I tried rearranging the style references in various way but it makes no difference (my package is 2.10.16). If you include Bootstrap in your styles, that seems a very dangerous thing to do, as your product would have a tangled and fragile dependency upon an unrelated product.

Thanks, Greg

P.S. The code in the sample FileOrFolderTemplate method is rather confusing as it's hard to tell which parts of it are Radzen invented or part of the Blazor framework. You should document what's happening in that method more clearly.

Indeed the base style overrides the Bootstrap button styles which we will address with one of the next releases. For now you can copy the CSS contents and remove the offending parts. Then reference your local copy.

I had to do a mock publish to get a persistent copy of the Radzen css files to appear under PubTmp _content folders. I copied the default-base.css over to my app's css folder and removed the btn-xxx styles that conflict with Bootstrap. I then referenced my copied css file instead of your documented one under _content. This did remove the conflicts and my buttons looked good again, but it caused the Radzen Tree nodes to render incorrectly, the text and icons are crushed together and left-aligned on each node, and I can see the word "arrow_right" underneath the jumble. I looked for dependencies on other css files and I rearranged the sequences but it makes no difference.

I've suffered for many hours trying to get the tree working acceptably, but I'm approaching a limit where I will abandon it and look for an alternative component. I think you should urgently ensure that Radzen components are stand-alone and do not have dependencies or conflicts with any other products.

Greg

The Radzen components do not have conflicts with or depend on other products. You probably forgot to include the Material icons font that Radzen themes use. This could be determined if you check the Network tab of your browser for any failed HTTP requests (404).

To demonstrate what I mean I am attaching a vanilla Blazor application created with dotnet new blazorserver. Radzen.Tree.zip (222.9 KB)

Here is how it looks

  • The bootstrap theming isn't affected
  • The RadzenTree component renders as expected

Thanks for the detailed reply. I made my project the same as yours exactly, but the buttons still went orange. Then I noticed that your package was 2.10.20 and I was on 2.10.16. I updated and cleared all browser cache and it just came good. I can see now that the previous conflicting top-level btn-xxx styles are children of other styles, so my hours of experiments and failures were a waste of time and I should have checked for updates (it was certainly the latest package when I started experimenting with the tree last week).

Anyway, the good news is that the tree is rendering nicely and there are no side-effects.

Thanks, Greg