+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / New Navigation Widget not loading icons

New Navigation Widget not loading icons

6 posts, 0 answered
  1. Jared
    Jared avatar
    122 posts
    Registered:
    04 Apr 2013
    20 May 2015
    Link to this post
    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?
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    06 Dec 2016
    25 May 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Jared
    Jared avatar
    122 posts
    Registered:
    04 Apr 2013
    29 May 2015 in reply to Stanislav Velikov
    Link to this post

    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.

  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    06 Dec 2016
    03 Jun 2015
    Link to this post
    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
    RadTreeView EnableEmbeddedSkins="false"

    In Sitefinity 8.0 a specific is that Telerik web controls don`t use skin Sitefinity anymore which was used for almost all controls. The skin Sitefinity has been removed from Telerik.Web.UI.Skins.dll and now the skin file used is Skin="Default".

    In case the navigation template for the vertical tree with sub levels have a rule for using Skin="Sitefinity" restore this template to Default and test again for the icons.

    Regards,
    Stanislav Velikov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Jared
    Jared avatar
    122 posts
    Registered:
    04 Apr 2013
    03 Jun 2015 in reply to Stanislav Velikov
    Link to this post

    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 http://demos.kendoui.com/web/treeview/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>​

  6. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    06 Dec 2016
    08 Jun 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
6 posts, 0 answered