6.1 kendo panelbar 1st time user
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?
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
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>
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>
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
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
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
>
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);
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
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
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)
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.
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
@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>