<ul id="panelbar">
    <li class="k-state-active">
        Vendors
        <ul>
                <li class="k-state-selected" ><span onclick="SetVendorID(1)">Vendor 1</span></li>
                <li><span onclick="SetVendorID(1)">Vendor 2</span></li>
       </ul>     
    </li>
</ul>

This selects the first item in the list but only highlights the text not the background of the item like it does when you click on it.

When you click on Vendor 2, Vendor 1 does not deselect the text, it stays white when it should be deselected (black).

Why doesn't this work?

Hello Eric,

Selected items and active items are different things. When you click on a root item, it becomes active and selected at the same time, which is reflected in its appearance. When an item is only active, but not selected, it looks different by design.

Only one item can be selected at a time.

In addition, item selection cannot be controlled declaratively, because the selected class is applied to an element, which is autogenerated by the PanelBar widget and does not exist in the original HTML markup. You need to apply selection with Javascript after width initialization by using the API.

Regards,
Dimo
the Telerik team