Hi,
I am experiencing a problem with panelbar with the latest kendo ui release. When using a (local) datasource which contains items with the 'expanded' option set to true, the corresponding panelbar item doesn't work. Neither the item gets expanded by default, the item does not expand when clicking the item.
Reverting back to an older version, for instance Kendo UI R3 SP2, thing are working properly. I have tried making a dojo example but at the moment I don't seem to be able to save the example ("Failed to create snippet"). I will add the code at the end of this psot.
On a side note: when using 'contentUrl', the content doesn't get loaded when clicking the non-responsive item. This might be as a result to the item not being expanded properly.
Regards,
Ron
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Untitled</
title
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"
>
<
script
src
=
"http://code.jquery.com/jquery-1.12.3.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
></
script
>
<
script
>
$(document).ready(function() {
$("#kendoBar").kendoPanelBar({
dataSource: [{
text: 'Test expanded not present (WORKING)',
expanded: false,
content: "Will work because no expanded option is provided"
}, {
text: 'Test expanded option is present (NOT WORKING)',
expanded: true,
content: "Will not work with the expanded option"
}]
});
});
</
script
>
</
head
>
<
body
>
<
h2
>Kendo PanelBar v2017.2.504 not working</
h2
>
<
h3
>Test kendoPanelBar: expanded: true not working</
h3
>
<
div
id
=
"kendoBar"
></
div
>
<
p
>
Also: contentUrl is not loaded on load, but is loaded when clicked on the item
</
p
>
</
body
>
</
html
>
Hello,
I§m trying to achieve a full height panel bar using Angular component. According to the docs and example here http://www.telerik.com/kendo-angular-ui/components/layout/panelbar/expand-modes/ , the 'full' mode is exactly what I want, keeping in mind that i have to set 'height' property.
The only difference between provided example and my case is that I'm setting the height property not from the input field, but as a result of a window.resize event (as I want the panel to occupy the full available height when window is resized). But the panel is not changing, it ignores the provided size (see attached screenshot).
The panel component is picking up the correct height value (as you can see on the right side of provided screenshot using Augury addon for chrome to inspect components), but its appearance is not affected.
Any ideas? Is that a bug?
The panelbar is dynamically generated in the .cshtml and some admins are entering <ul><li> items and it's causing the content zone to generated L2+ panelbar items.
I'd just like the ROOT to be a panelbar, and just render html in the content area.
Possible?
The Angular 2 panel bar creates its contents again and again on every event, when its contents needs displayed. This seems not to hurt much, when the inner structure is merely a few simple DOM Elements. But what, if the embedded component expensive to be constructed (because it may need a server request) and possibly very complex (because it may be host to a sohphisticated spreadsheet component, which it is in my case)?
Here is an example (full source in Plunker here): assume you are nesting the expensive component in the panelbar, just like the examples suggest to do:
<
kendo-panelbar
>
<
kendo-panelbar-item
[title]="'First Title'">
<
template
kendoPanelBarContent>
<
my-expensive-component
></
my-expensive-component
>
</
template
>
</
kendo-panelbar-item
>
<
kendo-panelbar-item
[title]="'Second Title'">...</
kendo-panelbar-item
>
</
kendo-panelbar
>
Initially, the panel bar just only the headers "First...", "Second"... when you open one of them, the content is created. That will take some while. When this is finished, the full content is visble. Now when you click on the "Second" panel, a strange thing happens: the second content is lazily created (that's ok) but also the first section is created again, even if it remains visible all the time. That is unexpected.
Even if the above behaviour is only a bug, I fear that the design of the PanelBar component is a bit too simplistic: whenever one opens / closes one of the panels in the stack, the inner component will be constructed, again and again and again ... can this be avoided?
If it would be only about the private data, one could think of a workaround, where the data is stored not in the component, but in a service, which gets injected. That would not necessarily result in beautiful code, but it may do the trick for the component's data. But what about inner complex DOM structure? My use case is, that inside the panel bar, I would like to put an Excel Spreadsheet (SpreadJS) - I would not just recreated the entire spreadsheet, on every show/hide event.
By the way - the same problem also applies to the Angular-Tab component. That one seems to have the identical create-from-template behaviour. Is there anything I can do about the frequent reconstruction of the components?
I recently upgraded my Kendo libraries to version 2017.1.213 from version 2016.2.812 and my PanelBar will no longer render. I am currently using the datasource formatting as defined here: http://www.telerik.com/forums/kendo-menu-item-click-open-new-window#FWU47PCqfEa5o7OGoNzO8w . I am using this format because I need the target and id attributes on the links which are unavailable with the json format.
Is there a more supported way to do this?
@(Html.Kendo().PanelBar()
.Name("ICAPTeamContentPanelBar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add()
//.Action("Membership", "ICAPTeam").Data("getentityId")
.LoadContentFrom("Membership", "ICAPTeam", new { entityid = 18 })
.HtmlAttributes(new { id = "ictMembership", @class = "PanelBarFont" })
.Text("Membership");
panelbar.Add()
.LoadContentFrom("AgentResult", "ICAPTeam")
.HtmlAttributes(new { id = "ictAgent", @class = "PanelBarFont" })
.Text("Agent Association");
panelbar.Add()
.LoadContentFrom("Proxy", "ICAPTeam")
.HtmlAttributes(new {id = "ictProxy", @class = "PanelBarFont"})
.Text("Proxy");
panelbar.Add()
.LoadContentFrom("Contacts", "ICAPTeam")
.HtmlAttributes(new {id = "ictContacts", @class = "PanelBarFont"})
.Text("Contacts");
})
)
Given this panelbar how can I set the value of entityid using JS?
Why don't the action and loadcontentfrom panelbar methods have a data property that allow setting parameters for the controller action?
Dear all,
I use PanelBar through angular integration. I link my kendo bar with my controller thanks to k-data-source.
<ul id="kendoPanelBar" kendo-panel-bar k-data-source="vm.accordion" k-options="vm.accordion.options">
I use contentURL to load each panelBar. All work fine !
My problem is the cache option which is disable for ajax request : Loading of different contentURL is performed with the addition of a timestamp for the request :
e.g. : selectRecherche?_=XXXXXXXXX
I would like a classic loading of the content without that timestamp addition (for use of $templateCache). How can I disable that ! I didn't find nothing in k-options! (transport ?)
Thanks a lot
Hi,
I need to find a way to execute my code (adjust popup size) when panelbar finished to change its size.I currently use expand/collapse methods but they called before animation starts and size start changing.
Thank you.