Treeview broken styling with nested spans

[JohnD]

Hello!  I have been troubleshooting an issue with the way that the treeview places elements.  It appears to only be happening with items that contain children (and thus have an expand arrow). 

I am unsure what could be causing this, but the library seems to be putting a span with the k-icon and k-i-expand classes (which will show the expand arrow) and then nesting the rest of the treeview row inside of that span.  When I look at the demos of the same version on your site, the spans are not nested.  Also I noticed that the css class names are different, but that might be on purpose (or perhaps I am confused about something).

<!--  HTML OF TREEVIEW ROW WITH CHILDREN  -->
<li role="treeitem" class="k-item" data-uid="900b9f8a-e745-4d2f-9177-36f8f029d19a" aria-selected="false">
    <div class="k-mid">
        <span class="k-icon k-i-expand">
            <span class="k-checkbox-wrapper" role="presentation">...</span>
            <span class="k-in">...</span>
        </span>
    </div>
</li>

<!--  VERSUS HTML OF TREEVIEW ROW WITHOUT CHILDREN  -->
<li role="treeitem" class="k-item" data-uid="dfd4e997-b440-42dc-8780-061f00ed16d6" aria-selected="false">
    <div class="k-mid">
        <span class="k-checkbox-wrapper" role="presentation">...</span>
        <span class="k-in">...</span>
    </div>
</li>

Honestly, I am pretty stumped on this one.. as far as what could be causing this.  I looked through the css classes in inspector and nothing stood out to me...  I *AM* using a template though, but I don't see how it could be the issue.  Here is the treeview definition as well as the template I am using:

<!-- GRID DEFINITION  -->
<div class="d-flex flex-row">
            @(Html.Kendo().TreeView()
                          .Name("TreeView")
                          .DataTextField("Name")
                          .Checkboxes(true)
                          .DragAndDrop(true)
                          .Events(events => events
                              .Select("treeview_OnSelect")
                              .Check("treeview_OnCheck")
                              .Drag("treeview_OnDrag")
                              .Drop("treeview_OnDrop"))
                          .TemplateId("treeview-template")
                          .DataSource(dataSource =>
                              dataSource.Read(read =>
                                  read.Action(Model.ReadAction, Model.Controller)))
            )
</div>

<!--  TEMPLATE  -->
<script id="treeview-template" type="text/kendo-ui-template">
    # var id = item.id; #
    # if (id.includes("group")) { #
    <i class="far fa-fw fa-folder"></i>
    # } else if (id.includes("category")) { #
    <i class="far fa-fw fa-sitemap"></i>
    # } else { #
    <i class="@Model.IconClass fa-fw"></i>
    # } #
    &nbsp;
    #: item.Name #
</script>

Any help or direction on this would be greatly appreciated.

[JohnD]

Well, I figured out the issue.  I had updated the nuget package in the application we are building, but forgot to update the script and style references in the layout.  So we were running on a much older version of the library... once we updated the library, the display issue went away!

Sorry to gum up the forums with this!  Old version was 2018.3.911 which we updated to 2022.2.621.

[Mihaela]

Hi John,

Thank you for sharing with the community how the issue has been resolved at your end.

If any related questions arise, feel free to let me know.