Questions on Kendo UI for jQuery Forum

3 answers

242 views

All AJAX Content Loaded programmatically without opening each item

I'm using a PanelBar with MVC extensions to have about 5 grids on the screen (grids are AJAX content in each PanelBar item - from partial view).
I also have two dropdowns at the top of the page (companies & locations) where locations cascades from companies. When the cascade event on the location happens, I want to reload all 5 grids at once and not wait for the user to open each panelbar. In addition, I want to show the count of items in the grid in the text of the panel bar (e.g. "Transmission Errors (25)" where "Transmission Errors" is the text of the panelbar item and 25 is the number of items in the grid). When the grid is loading the count in the panelbar item text should be "--" to indicate loading.

I've got the dropdownlists working (for the most part - that's a different post) and am subscribing to the cascade event and am updating each panelbar item's href (ul>li>a.k-link) to have the appropriate company and location query strings.

Now, how do I force each panelbar to go get that content from the server without programmatically opening each panelbar? In other words, I want each PanelBar item to get its AJAX content while having each PanelBar remain closed.

For now, I'll hold off on my question about updating the text of the panelbar item (with the grid data total count) until I get past this issue.

Thanks,
--John

PanelBar

answered on 07 Mar 2015

11 answers

651 views

panel bar not collapsing

Basically what I'm trying to do here is expand and collapse two panels when one panel is expanded and collapsed.



The flyer panel bar expands just fine when the order panel bar is clicked.



However, the second time through, when the order panel bar is clicked and collapses, the flyer info panel bar does not also collapse.



I've looked through the javascript console, no errors are coming up and I've stuck an alert in the collapse portion which pops up, but still it does not collapse.



What else can I try to get these two panel bars in sync as far as when they expand and collapse?



$(

"#orderInfoPanelBar>li").on('click', function (e) {

var flyerInfoPanelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");

var orderInfoPanelBar = $("#orderInfoPanelBar").data("kendoPanelBar");

/* Expand the flyer panel bar if it is not already expanded */

if (flyerInfoPanelBar.element.children("li").hasClass("k-state-active") != true) {

//var panelBar = $("#flyerInfoPanelBar").data("kendoPanelBar");

$("#flyerInfoPanelBar").data("kendoPanelBar").expand($("#li_flyerInfo1"));

$("#flyerInfoPanelBar").data("kendoPanelBar").select($("#li_flyerInfo1"));

}

/* Collapse the flyer panel bar if the order panel bar is being collapsed as well */

if (orderInfoPanelBar.element.children("li").hasClass("k-state-active") == true &&

flyerInfoPanelBar.element.children("li").hasClass("k-state-active") == true) {

$("#flyerInfoPanelBar").data("kendoPanelBar").collapse($("#li_flyerInfo1"));

}

});

PanelBar

answered on 05 Mar 2015

1 answer

47 views

PanelBar with a Mobile/Hierarchical/ListView look and feel

Is it possible (or it has to be proposed) a PanelBar that instead expanding, slides (substituting) and shows the sub content. Similarly to the hierarchical mobile listview or even like the demos navigation in the kendo-ui demos ( http://demos.telerik.com/kendo-ui/... )?

PanelBar

answered on 19 Feb 2015

1 answer

51 views

Added Menu Widget inside PanelBar Header

I'm trying to initialize Kendo Menu Widget inside the header of PanelBar. So far, I have been stuck with getting it to work together. What's the best way to achieve this?

PanelBar

answered on 06 Feb 2015

3 answers

172 views

Selecting a sub item in a panelbar

Hello,

Is there a way to capture the select event of a sub item in a panel bar?

Based on the sub item selected, I want to navigate to a different page.

Thanks for your time and help.

PanelBar

answered on 27 Dec 2014

1 answer

173 views

Loading Panelbar from Ajax/Json

I am trying to load the following dynamically to recreate a panelbar's complete contents.

Originally, the panel bar has no contents, and depending on a user's actions, I do an ajax call to get the new panelbar contents that returns the json structure below.

var pb = $("#myPanelBar").data("kendoPanelBar");

var x =
      [
        {
          text: "Colors",
          expanded: true,
          items: [
            { text: "Red" },
            { text: "Green" },
            { text: "Blue" },
            { text: "Orange" },
            { text: "+ Add New" }
          ]
        },
        {
          text: "Animals",
          expanded: true,
          items: [
            { text: "Lion" },
            { text: "Eagle" },
            { text: "Lizzard" },
            { text: "+ Add New"}
          ]
        },
        {
          text: "Planets",
          expanded: true,
          items: [
            { text: "Pluto" },
            { text: "Mars" },
            { text: "Saturn" },
            { text: "+ Add New" }
          ]
        }
      ]

PanelBar

answered on 08 Dec 2014

5 answers

91 views

Editor within Panelbar

I'm trying to get an editor inside of a panelbar to work. The only way it works is if I have a pre-selected panel. Without a pre-selected panel kendo dies with the error "TypeError: t is undefined".

It seems I can only include the editor when there is a pre-selected panel. No pre-selected panel and no editor works.
With the code below, activate either the data-role or the pre-selection class, and it will fail.

<div id='main'>

<ul

data-role="panelbar"

data-expand-mode="single"

>

<li xclass="k-state-active">

Send Email

<div style="padding: 10px;">

<textarea

xdata-role='editor'

data-bind='value: emailBody'

>

</textarea>

</div>

</li>

<li>

Send Text

<div style="padding: 10px;">

Text Stuff

</div>

</li>

<li>

Dymo label

<div style="padding: 10px;">

Label Stuff

</div>

</li>

</ul>

</div>

<script>

console.log(kendo.version)

var viewModel = kendo.observable({

emailBody: '',

actionEmail: function(ev) {

}

})

kendo.bind($("#main"), viewModel);

</script>

PanelBar

answered on 25 Nov 2014

1 answer

40 views

Get PanelBar height after expand animation

I need a PanelBar's height after the user has expanded it. The problem is that I can't use the height during the expand event because the animation hasn't started or finished.

Is there a way I can have a callback when the animation is finished? Something like an "expanded" event? Is using setTimeout my only option?

Thanks!

PanelBar

answered on 12 Nov 2014

3 answers

146 views

Form inside PanelBar

Hi,
Can i place Form inside a PanelBar?
I have a very long form that I want to logically split and place inside PanelBar items. Is that possible?

I will have a single button outside the PanelBar to submit the entire form.

Appreciate your assistance.

Best regards
Bilal Haidar

PanelBar

answered on 11 Nov 2014

1 answer

59 views

Use ObservableArray with kendo-panel-bar

I've a kendo-panel-bar (using the AngularJs directive) which I would like to bind to a datasource. Unfortunately it seems like the panel bar cannot bind to a kendo.data.ObservableArray. Setting the datasource to an array works fine, setting it to an ObservableArray results in a "Cannot read property 'length' of undefined" exception.

I'm aware of the solution with k-rebind (provided here: https://github.com/kendo-labs/angular-kendo/issues/269) Since I want to use the panel bar bound to a Breeze datasource (which internally uses a ObservableArray), this is unfortunately not a solution for me.

Are there any other possibilities to have a panel bar bound to an ObservableArray?

PanelBar