New Navigation Widget not loading icons

I have recently upgraded from 5.4 to 8.0 and have noticed that the navigation widget is missing the icons to expand and collapse.  I can see via the console window that the correct classes are applied, but do not see the background image being applied within the CSS.  Is this a known bug?

Hi,

I am not sure what icon you refer to if I am the same page. If you are using the Horizontal with dropdown menus template the dropdown is like this.

Regards,
Stanislav Velikov
Telerik

See my attached image.  The image on the left is the current state in version 5.4 and the one on the right is from version 8.0.  If you hover over to the left you can still click and expand the nodes, but the image is not present.

 I am using the Tree (vertical with sub levels) setting for the widget.

Hi,

The icons for this widget template are available in Sitefinity 8.0, here is a screenshot.
Those icons should be loaded so first check web.config if there is a rule set to disable embedded skins for RadTreeView control

This is the code for the vertical tree with sub levels:

<%@ Control Language="C#" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.Extensions.LightNavigationControlTemplate" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>

<sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="true" />
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    <sf:ResourceFile JavaScriptLibrary="KendoWeb" />
</sf:ResourceLinks>

<navigation:SitefinitySiteMapDataSource runat="server" ID="dataSource" />

<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />
<div class="sfNavWrp sfNavTreeviewWrp <%= this.GetCssClass() %>">
    <%-- responsive design section - renders templates for the responsive design--%>
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToToggleMenu" TemplateName="ToggleMenu" />
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToDropDown" TemplateName="Dropdown" />
    <%-- end of the responsive design section --%>

    <ul class="sfNavTreeview sfNavList" runat="server" id="navigationUl">
        <navigation:NavigationContainer runat="server" DataSourceID="dataSource">
            <Templates>
                  <navigation:NavigationTemplate>
                        <Template>
                            <li>           
                                <a runat="server" href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>          
                                <ul runat="server" id="childNodesContainer"></ul>
                            </li>                                        
                        </Template>
                      <SelectedTemplate>
                            <li>           
                                <a runat="server" href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' class="sfSel" target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>          
                                <ul runat="server" id="childNodesContainer"></ul>
                            </li>                                        
                        </SelectedTemplate>
                    </navigation:NavigationTemplate>
                </Templates>
        </navigation:NavigationContainer>
    </ul>
</div>

<%-- link to Kendo documentation demos.kendoui.com/.../index.html --%>

<script type="text/javascript">
    (function ($)
        var kendoTreeView = $('.sfNavTreeview').not('div.k-treeview .sfNavTreeview').kendoTreeView(
            animation: false,
            expand: function (e)
                if (window.DataIntelligenceSubmitScript)
                    DataIntelligenceSubmitScript._client.sentenceClient.writeSentence(
                        predicate: "Toggle navigation",
                        object: this.dataItem(e.node).text,
                        objectMetadata: [
                                                   
                                                        'K': 'PageTitle',
                                                        'V': document.title
                                                    ,
                                                   
                                                        'K': 'PageUrl',
                                                        'V': location.href
                                                   
                        ]
                    );
               
           
        ).data('kendoTreeView');
        if (kendoTreeView)
            kendoTreeView.expand(kendoTreeView.element.find(".k-item"));
       
    )(jQuery);
</script>​

Hi,

The problem is not in the template, its all appropriate. There must either web.config rule to remove this or the page CSS/Theme gets into play to override the icon.
Test to use the navigation widget on a page that has no template to see if all will render ok.
Try temporary using a web.config from an empty SF site to check if there is indeed web.config rule that controls the icon for the navigation/ RadTreeVIew control which makes this nav template.

Regards,
Stanislav Velikov
Telerik