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

What is the best way to expand a panel bar based on the header text

4 Answers 138 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Casey
Top achievements
Rank 1
Casey asked on 08 Aug 2012, 06:06 PM
Hi All,
I have a panel bar that's populated with cities as the headers and different locations as the child elements (from JSON).  What I want to do is expand the last selected header based off of the city name once the panel bar is repopulated with new data.  I'm able to capture the last selected header and parse the city name from it however I cannot figure out how to use it to find the header I need and re-expand it.  I hope this makes sense to someone.

Thanks,
Casey

4 Answers, 1 is accepted

Sort by
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 08 Aug 2012, 09:52 PM
Hi Casey,

If the id for your panelbar is "panelbar" and the name the city is "City 2", then the following would work:

var city = "City 2";
var li = $("#panelbar").find("span.k-header:contains('" + city + "')").closest("li.k-item");
$("#panelbar").data("kendoPanelBar").expand(li);

Attached is an example.

Regards,

John DeVight
0
Casey
Top achievements
Rank 1
answered on 08 Aug 2012, 10:42 PM
Hi John,
That's much cleaner than the convoluted method I came up with but it has a problem. If I have two cities, let say "Chicago" and "Chicagotown" and it looks for "Chicago" it returns both since they both contain it.  I'm guessing there is a way around this issue but I'm not too versed in jquery or javascript for that matter and I'm just hacking my way along. Any idea how to fix it?

Thanks,
Casey
0
Casey
Top achievements
Rank 1
answered on 08 Aug 2012, 10:54 PM
John,
I found a way to extend contains which fixes the issue.  

                    $.expr[":"].econtains = function (obj, index, meta, stack) {
                        return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
                    }

                    var li = $('#PanelBar').find("span.k-header:econtains('" + LastSelectedCityName + "')").closest("li.k-item");
                    
                    pb.expand(li);

This forces an exact match which seems to be working fine so far.

Thanks for the help, I really appreciate it!
Casey
0
John DeVight
Top achievements
Rank 1
answered on 09 Aug 2012, 12:22 AM
Glad to see that you found a solution that worked out well for you!

Regards,

John DeVight
Tags
PanelBar
Asked by
Casey
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Casey
Top achievements
Rank 1
Share this question
or