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

5 posts, 1 answers
  1. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 08 Aug 2012 Link to this post

    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
  2. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 08 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 08 Aug 2012 Link to this post

    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
  5. Casey
    Casey avatar
    15 posts
    Member since:
    Jan 2012

    Posted 08 Aug 2012 Link to this post

    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
  6. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 08 Aug 2012 Link to this post

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

    Regards,

    John DeVight
Back to Top
Kendo UI is VS 2017 Ready