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

Forums / Developing with Sitefinity / 6.1 kendo panelbar 1st time user

6.1 kendo panelbar 1st time user

14 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    18 Jul 2013
    Link to this post
    That's what I like about programing. You get to learn new stuff every day :-)

    Well now that 6.1 is out I am trying out my first panelbar navigation:

    http://ceramdis.ch.mserver4.arvixevps.com/werkstoffe/nichtoxidkeramik/cesitnit-cs30

    Can someone tell me how to keep the panelbar open?

    Click on Werkstoffe (Group page), Nichtoxidkeramik (Group page),  CeSinit CS 30 (real page)

    Markus

    PS: does the switch to panelbar make sense or could/should I have styed with treeview?
  2. Ivaylo Angelov
    Ivaylo Angelov avatar
    68 posts
    Registered:
    27 Oct 2016
    19 Jul 2013
    Link to this post
    Hi Markus,

    I answered to the your support ticket you have sent to us.
    So, I will just copy the body content of my response:

    Regarding the Kendo PanelBar and the ability to expand all its items, please have a look at this forum post.
    And sure, the other option for you would be to use the default provided widget for navigation and just style it the way you want. You can find this article useful if you decide to do so.


    Best wishes,
    Ivaylo Angelov
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 Jul 2013 in reply to Ivaylo Angelov
    Link to this post
    I just want the selected item to be open!

    This is a lead I have but does not seem to work correct.

    What I want of course is that if you click on a panelbar item which will load a page that this section of the panel bar stays/remains open and others previously open will be closed.

    Once again I think this will be a common scenario with the new navigation widget to keep them open. Am I missing something? 

    This is the site : http://ceramdis.ch.mserver4.arvixevps.com/news


    Any help is apreciated.

    <script type="text/javascript">
        (function ($) {
            var kendoTreeView = $('.sfNavTreeview').not('div.k-treeview .sfNavTreeview').kendoPanelBar({
                animation: false
            }).data('kendoPanelBar');
          //  kendoTreeView.collapps(kendoTreeView.element.find(".k-item"));
        })(jQuery);
       
       function onSelect(e) {
           var item = $(e.item),
         index = item.parentsUntil(".k-panelbar", ".k-item").map(function () {
             return $(this).index();
         }).get().reverse();
     
          index.push(item.index());
     
           $.cookie("KendoUiPanelBarSelectedIndex", index);
         // alert($(e.item).find("> .k-link").text());
         (e.item).expand();
    }
       
       
      var ThePanelBar = $('.sfNavTreeview').not('div.k-treeview .sfNavTreeview').kendoPanelBar({
        select: onSelect
    }).data("kendoPanelBar");
       
      function select(position) {
        var ul = ThePanelBar.element;
        for (var i = 0; i < position.length; i++) {
            var item = ul.children().eq(position[i]);
            if (i != position.length - 1) {
                ul = item.children("ul");
                if (!ul[0])
                    ul = item.children().children("ul");
                ThePanelBar.expand(item, false);
            } else {
                ThePanelBar.select(item);
            }
        }
    }
       
      // on page ready select value from cookies
    $(document).ready(function () {
        if ($.cookie("KendoUiPanelBarSelectedIndex") != null) {
            //alert($.cookie("KendoUiPanelBarSelectedIndex"));
            var numbersArray = $.cookie("KendoUiPanelBarSelectedIndex").split(',');
            select(numbersArray);
        }
        else {
            // TEST INIT MESSAGE, ON REAL USE DELETE
          //  alert("DocumenReadyFunction: KendoUiPanelBarSelectedIndex IS NULL");
        }
    });
      
    </script>


    Markus
  4. Ivaylo Angelov
    Ivaylo Angelov avatar
    68 posts
    Registered:
    27 Oct 2016
    24 Jul 2013
    Link to this post
    Hello again,

    You can have a look at this demo page: http://demos.kendoui.com/web/panelbar/index.html
    I guess this is the functionality you want to achieve. And the key for that is in the configuration of the panel bar itself:
    <script>
        $(document).ready(function() {
            $("#panelbar").kendoPanelBar({
                expandMode: "single"
            });
        });
    </script>

    Regards,
    Ivaylo Angelov
    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 Public Issue Tracking system and vote to affect the priority of the items
  5. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    24 Jul 2013 in reply to Ivaylo Angelov
    Link to this post
    That javascript is WAYYYY overkill

    1) Make your panelbar a global variable and return the .data("kendoPanelBar") into it so you don't have to keep finding it
    2) Don't select with cookies, the markup is there in the form of a class "sfSel" on which item to expand

    http://docs.kendoui.com/api/web/panelbar#methods-select

    panelBar.expand($(".sfSel"));

    I mean unless you're trying to do something crazy complex this should just be like 4-5 lines of script
  6. Ivaylo Angelov
    Ivaylo Angelov avatar
    68 posts
    Registered:
    27 Oct 2016
    29 Jul 2013
    Link to this post
    I would like to thank Steve for sharing his suggestion with the community.
    Using the documentation by Kendo would be substantial enough when it comes
    to working with the tools they are providing.

    Please, let us know if we could further assist on the matter.

    Regards,
    Ivaylo Angelov
    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 Public Issue Tracking system and vote to affect the priority of the items
  7. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    06 Aug 2013 in reply to Ivaylo Angelov
    Link to this post
    Dear Ivaylo
    Dear Steve

    Frist of all thanks for your response. Was on vacation that's why I did not thank you earlier.

    Ivaylo - Singel expand seems to kind of work with the code below but only on the first level
    Steve - Unfortunately the expand seem not to be working the way I do it. Can you see what I am doing wrong?

    I admitt that I don't even know what makes my treeview an panelbar :-(

    <%@ 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" />
     
    <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='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>         
                                    <ul runat="server" id="childNodesContainer"></ul>
                                </li>                                       
                            </Template>
                          <SelectedTemplate>
                                <li>          
                                    <a runat="server" href='<%# Eval("Url") %>' 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').kendoPanelBar({
                animation: false,
               expandMode: "single",
                           }).data('kendoPanelBar');
                kendoTreeView.expand($(".sfSel"));
        })(jQuery);
       
    </script>

    http://ceramdis.ch.mserver4.arvixevps.com/keramikeigenschaften/platzhalter would be one page where you see the expand not working

    This is a video showing the single expand working only 1st level

    Screencast singele expand

    Any help is as usuall highly aprecitate.

    Markus
  8. Boyko Karadzhov
    Boyko Karadzhov avatar
    56 posts
    Registered:
    14 Jul 2016
    07 Aug 2013
    Link to this post
    Hello,

     What you need is to expand the nodes that have a selected node as a child. This is what I came up with:

    (function ($) {
        var kendoPanelBar = $('.sfNavTreeview').not('ul.k-panelbar').kendoPanelBar({
            animation: false,
           expandMode: "single"
                       }).data('kendoPanelBar');
    var nodesToExpand = kendoPanelBar.element.find("li:has(li a.sfSel)");
    kendoPanelBar.expand(nodesToExpand);
     
    })(jQuery);

    I also modified the "not" part of the initial jQuery selector to be adequate with the Panel bar. It is there to prevent selecting elements that are already decorated by Kendo.

    About the "expandMode: single" problem that you showed in the video, I would suggest a post inside the Kendo forums or ticketing system. Fixing it from the outside will be quite error-prone.

    Regards,
    Boyko Karadzhov
    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 Public Issue Tracking system and vote to affect the priority of the items
  9. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    07 Aug 2013 in reply to Boyko Karadzhov
    Link to this post
    Dear Boyko

    Works like a charm. I will go ask in kendo forum or open a ticket about the single expand.

    Thank you very much for your great help.

    How about integrating a panelbar template for the navigation with these settings for 6.2

    I am sure other will want to use the panel bars as well and the keeping it open is a normal/expected behavoir.

    Markus
  10. Tihomir
    Tihomir avatar
    23 posts
    Registered:
    01 Jul 2016
    09 Aug 2013
    Link to this post
    Hi Markus,

    Thank you for your feedback.

    I agree that it makes sense to have built-in template for panelbar which offers the ability to expand all nodes to the currently selected node. I have logged this as a feature request in our system and I have also opened a PITS issue where you can follow its progress and vote to increase its popularity. 

    Regards,
    Tihomir
    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 Public Issue Tracking system and vote to affect the priority of the items
  11. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    16 Aug 2013 in reply to Tihomir
    Link to this post
    Dear Tihomir

    No I have the following problem with my solution.

    As you can see Werkstoffe, Kompetenz and Über uns are 'real' pages. However when I click them the pages are not loaded but only the children expanded.

    Therefor the page: http://ceramdis.ch.mserver4.arvixevps.com/werkstoffe kann never be reached (Content of Page would be different so we need that page)

    So clicking on a top navigation  item should 

    a) on real pages open that page and expand panelbar one level down
    b) on group pages, redirect to first real page

    Anyone with some kendo panelbar knowledge.

    Markus

    PS: @Steve:  Since you know how bad my css is you can imagine how much I am lost at kendo panelbar :-9)



  12. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Aug 2013 in reply to Markus
    Link to this post
    Take the code...before you kendoPanelbar it...the plain ul/lis. Put it into jsbin.com, with the code to init the panelbar.  Then post it over to the kendo forums and ask them whats wrong with it...they'd likely ask you for a sample anyway, and the great part about kendo is it's all javascript so you CAN just dump it to jsfiddle/jsbin...I only suggest bin because it has a kendo template to start with.
  13. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 Aug 2013 in reply to Steve
    Link to this post
    Dear Steve

    Thanks I do give it a try: http://jsbin.com/IKUzUt/10/edit 

    However somehow I think its also a Sitefinity problem. Kendo menu is now the way to go on sitefinty and therefore I should be solved here.

    Will open a ticket.

    Thanks again for the help 

    Markus
  14. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    23 Aug 2013 in reply to Markus
    Link to this post
    @All

    Thanks for your help.

    After switching back to the treeview this is what did the trick (thank's Patrick). So easy if you look at the line that expands all and is already in the widget. I asked telerik to add the expand selected node in the default widget for 6.2. Hope they do it :-)

    Maybe it would even be cool if you could choose these two options in the designer

    1) have all nodes closed on start
    2) expand all nodes on start
    3) expand selected node

    <script type="text/javascript">
        (function ($) {
            var kendoTreeView = $('.sfNavTreeview').not('div.k-treeview .sfNavTreeview').kendoTreeView({
                animation: false
            }).data('kendoTreeView');
           
          // to expand all nodes uncomment next line
          // kendoTreeView.expand(kendoTreeView.element.find(".k-item"));
           
          // to expand selected node uncomment next line    
          kendoTreeView.expand(kendoTreeView.element.find(".sfSel"));
         
           
        })(jQuery);
    </script>

    Markus
14 posts, 0 answered