Get the ID of a selected Item

[Adam]

When I create the items in the panelbar, I am passing in an id like this:

panelbar.append({text:m.text, id:m.id});

I need a way to get this id back when an item is selected, but I can't figure out how to do it.

Getting just the text isn't sufficient.

Thanks,
Adam

[Kamen Bundev]

Hello Adam,

If you create the items one by one like this, the ID is not used and not kept, however - you can create the Menu from a single JSON object, which you can save somewhere and then reference it on select. check this jsFiddle on how you can do it:


Currently the ID can't be set through append options. However, when Hierarchical DataSource support arrives in the PanelBar, each item in the DataSource has unique ID, which can be retrieved and this will ease the usage a bit.

Kind regards,
Kamen Bundev
the Telerik team

[Christophla]

Kamen,
   How can I go about doing the same thing for the panelbar?

[Kamen Bundev]

Hi Christopher,

Almost the same way:


All the best,
Kamen Bundev
the Telerik team

[Andre]

I have a Kendo dropdown list where you can select a menu.
When you select a menu the menu gets displayed as a panelbar. When you click an
item on the panelbar I get the value like in the example above and everything
works. When I choose another menu from the dropdown list the correct menu loads
but the onselect retrieves the value of the previous menu and not the current
menu. Is there a way of retrieving the current menu value?

My code:

$.getJSON('/Clientapi/getHierarchyMenu',
        function(menu) {
            function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());
                    drawNavMenu(dataItem.value)
            }

            var data = menu.items

            $("#hierarchyMenu").kendoDropDownList({
            dataTextField : "text",
            dataValueField : "value",
            optionLabel : "Please Select a Menu",
            dataSource : data,
            select : onSelect
            })

        });
}

function drawNavMenu(id) {
    url = '/Clientapi/getMenu?id=' + id
    $.getJSON(url, function(data) {
    function onSelect(e) {
        var item = $(e.item)
        var panelElement = item.closest(".k-panelbar")
        var dataItem = this.options.dataSource
        var index = item.parentsUntil(panelElement, ".k-item").map(
            function() {
            return $(this).index();
            }).get().reverse();

        index.push(item.index());

        for ( var i = -1, len = index.length; ++i < len;) {
        dataItem = dataItem[index[i]];
        dataItem = i < len - 1 ? dataItem.items : dataItem;
        }

        alert("---> " + dataItem.value)
    }

    $("#treeview-left").kendoPanelBar({
        dataSource : data,
        select : onSelect
    });
    });
}

Thanks.
Andre.

[Kamen Bundev]

Hi Andre,

I will need a bit more code in order to decide what is going wrong. Can you isolate the issue in a sample page and send it over? You can open a support ticket if you value the privacy.

Regards,
Kamen Bundev
Telerik

[Peter]

Further to this, is there a Hierarchical DataSource on the horizon for the PanelBar? (which would alleviate the need for this awesome code)

[Petyo]

Hi Peter,

We don't have immediate plans for such support. Please vote for this item in our UserVoice portal - once it gathers enough votes we will include it in our development plans.

Regards,
Petyo
Telerik