This is a migrated thread and some comments may be shown as answers.

reload Item content from partial view

5 Answers 621 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Nuno
Top achievements
Rank 2
Nuno asked on 23 Apr 2014, 05:44 PM
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??

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 25 Apr 2014, 01:59 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nuno
Top achievements
Rank 2
answered on 26 Apr 2014, 02:34 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2014, 11:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nuno
Top achievements
Rank 2
answered on 28 Apr 2014, 04:53 PM
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!
0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2014, 06:46 AM
Hi Nuno,


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

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
PanelBar
Asked by
Nuno
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Nuno
Top achievements
Rank 2
Share this question
or