Telerik Forums
Kendo UI for jQuery Forum
3 answers
602 views

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>
 
 
   
  <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>
Plamen
Telerik team
 answered on 27 Jun 2017
3 answers
168 views

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?

Dimiter Madjarov
Telerik team
 answered on 26 Jun 2017
1 answer
78 views

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?

 

 

Nencho
Telerik team
 answered on 14 Apr 2017
4 answers
119 views

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?

Alexander
Top achievements
Rank 1
 answered on 22 Feb 2017
3 answers
180 views

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?

Plamen
Telerik team
 answered on 17 Feb 2017
3 answers
1.3K+ views
I want to make just like Accordion which is uploaded and I tried several time to make an accordion just like given image or window using Kendo UI panelbar tool. But it did not work. I need your support to solve this issue by using Kendo UI panelbar.
Nencho
Telerik team
 answered on 31 Jan 2017
1 answer
61 views
I am developing an angular 1.5 app and using the Kendo panelbar component.

The panelbar does not support the angular ng-repeat directive and requires that the developer use a Kendo DataSource component to store the model data.

Simply stated, I want to update the panelbar's underlying data model and expect the changes to be automatically rendered in the panelbar like a normal angular app.  

When you update a datasource that is attached to a panelbar the change is not rendered when you just update the underlying datasource.  I then tried using the kendo.datasource insert method, but again I added data to the model (or datasource component) and it was not rendered.  I then tried to insert new data into my model and call the panelbar.expand(byId), the expand never opens the branch.  I've tried a number of other work arounds with only partial success.

What I need is the proper way to dynamically update a panelbar's data model and see the new data rendered (preferably not using jQuery and is more angular-like, but anyway I can get this to work is fine).


thanks in advance for your help....
Peter Milchev
Telerik team
 answered on 20 Dec 2016
1 answer
142 views

    @(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?

 

 

Veselin Tsvetanov
Telerik team
 answered on 28 Sep 2016
1 answer
68 views

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

 

Boyan Dimitrov
Telerik team
 answered on 21 Jul 2016
1 answer
202 views

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.

Dimiter Topalov
Telerik team
 answered on 19 Jul 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?