6.1 kendo panelbar 1st time user

Posted by Community Admin on 04-Aug-2018 13:48

6.1 kendo panelbar 1st time user

All Replies

Posted by Community Admin on 18-Jul-2013 00:00

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:

ceramdis.ch.mserver4.arvixevps.com/.../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?

Posted by Community Admin on 19-Jul-2013 00:00

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

Posted by Community Admin on 19-Jul-2013 00:00

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 : 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

Posted by Community Admin on 24-Jul-2013 00:00

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

Posted by Community Admin on 24-Jul-2013 00:00

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

docs.kendoui.com/.../panelbar

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

I mean unless you're trying to do something crazy complex this should just be like 4-5 lines of script

Posted by Community Admin on 29-Jul-2013 00:00

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

Posted by Community Admin on 06-Aug-2013 00:00

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

Posted by Community Admin on 07-Aug-2013 00:00

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

Posted by Community Admin on 07-Aug-2013 00:00

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

Posted by Community Admin on 09-Aug-2013 00:00

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

Posted by Community Admin on 16-Aug-2013 00:00

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: 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)



Posted by Community Admin on 16-Aug-2013 00:00

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.

Posted by Community Admin on 19-Aug-2013 00:00

Dear Steve

Thanks I do give it a try: jsbin.com/.../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

Posted by Community Admin on 23-Aug-2013 00:00

@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

This thread is closed