reload Item content from partial view

[Nuno]

Hello!

I'm developing a MVC4 application and having some trouble with the panel bar. Every time an item is expanded, i need that it's contents get reload from a partial view.

When the panel bar is initialized I set its datasource to the result of an AJAX call that returns JSON with the need properties to populate the panelbar dynamically, and it it's working nicely. The content url comes already prepared in this datasource.

Then I hook up to the select (or expand) event of the panel bar so that I call the reload method. The thing happening is that when the reload method is invoked, partial view get's loaded to the request. The images help to understand this.

Some code:

To get datasource and populate the panelbar

$.getJSON('@Url.Action("GetGrupos", "RegistoFCPlano")/?tipoGrupo=2&data=' + $("#datepicker").val() + '&cg1=' + codGrupo)
        .done(function (json) {
            var panelItems = $.map(json, function (obj) {
                return {
                    text: obj.Codigo,
                    expand: true,
                    contentUrl: obj.Conteudo
                };
            });

            $("#panelbar").kendoPanelBar({
                dataSource: panelItems,
                expandMode: "single",
                id: "Codigo",
                select: refreshContent
            }).data("kendoPanelBar");
        })
        .fail(function (jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.log("Request Failed: " + err);
        });

To refresh the contents

var refreshContent = function () {
        var panelBar = $("#panelbar");
        var item = panelBar.select();
        panelBar.reload(item[0]);
    };

Am I missing something here??

[Dimiter Madjarov]

Hello Nuno,


In the provided sample code, the instance of the PanelBar widget is not retrieved. You could access it via jQuery data() method or via this in the widget event handlers.
E.g.

function refreshContent(e) {
    this.reload(e.item);
}

Let me know if this information helps.

Regards,
Dimiter Madjarov
Telerik

 

 

[Nuno]

ok, got it, followed your instructions and I got it working(ish)...

Now I have other odd behaviour. I put an alert in the event and it get's hit 3 times for each panelbar item I click, after that I get more than one item expanded, the clicked one and previous expanded one. :S

Not quite sure on why this is happening.

[Dimiter Madjarov]

Hello Nuno,


I would opt for using console.log instead of alert for testing event firing, as the second one may cause strange results. Indeed with the current implementation, the first time when the item is selected, it will perform the request twice. You could avoid this by maintaining of array, indicating which items were selected until now.
E.g.

var selected = [];

function select(e) {
    var item = $(e.item).index();

    if (selected.indexOf(item) >= 0) {
        this.reload(e.item);
    } else {
        selected.push(item);
    }
}

If you are still experiencing any issues, do not hesitate to contact us.

Regards,
Dimiter Madjarov
Telerik

 

 

[Nuno]

Hello Dimiter, 

Thanks for the reply. 

I made a quick test and it seems to be behaving oddly still. Nevertheless, I'm now working on another part of the system and as soon I can return to this I'll make a more thorough test and then post the feedback.

All the best!

[Dimiter Madjarov]

Hi Nuno,


Thank you for the update. Let us know if further assistance is required.

Regards,
Dimiter Madjarov
Telerik