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

[Casey]

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

[John DeVight]

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

[Casey]

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

[Casey]

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

[John DeVight]

Glad to see that you found a solution that worked out well for you!

Regards,

John DeVight