PopOver & hierarchy of items.

2 posts, 0 answers
  1. John
    John avatar
    13 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2013 Link to this post


    Is it possible to implement a popover that explores a hierarchy?  The HierarchicalDataSource docs suggest that it's only the TreeView that can handle this, which I'm assuming means that it's not possible to make the popover do this - but I've not tried it out yet. 

    If there's any examples of how this might be done, links would be hugely appreciated. 

    I'm trying to implement a popover that allows the user to browse a hierarchy, sample screenshot attached.


    John Clayton
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 27 Feb 2013 Link to this post

    Hello John,

    Your understanding is correct, the Hierarchical DataSource component can be used only with the TreeView widget. If you want to implement a Hierarchical ListView, you can use separate Views, ListViews and DataSources. On click of the root ListView, you can filter the DataSource of the child ListView and navigate to it.

    There is a code library project that demonstrates the implementation, you can download it from here.

    In your case, you should put the corresponding Views inside the PopOver. Instead of using the navigate method of the application, you should use the navigate method of the PopOver's Pane.

    function onClick(e) {
        var id = e.dataItem.id,
            listview = e.sender,
            pane = listview.element.closest(".km-pane").data("kendoMobilePane");
        type.filter({field: "category", operator: "eq", value: e.dataItem.id});

    For your convenience I prepared a small example based on the aforementioned code library: http://jsbin.com/iwexir/3/edit

    I hope this information will help.

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top