[Solved] Visibility on Items

[kevin]

Hi,

I've been playing around with telerik for about 1/2 a day and was wondering how to change the visiblity of items within a PanelBar, within javascript.

I have a parent PanelBar as follows:
 <% Html.Telerik().PanelBar()
           .Name("MainPanel")
           .HtmlAttributes(new { style = "width: 100px; float: left; margin-bottom: 30px;" })
           .ClientEvents(events => events
                    .OnSelect("onSelect")
            )
           .Items(item =>
           {
               item.Add()
                   .Text("Users");
               item.Add()
                   .Text("UserGroups");
               item.Add()
                   .Text("Units");
               item.Add()
                   .Text("Event");
           })        
           .Render(); %>

and a second PanelBar coded like this:
<%  Html.Telerik().PanelBar()
        .Name("ListPanel")
        .HtmlAttributes(new { style = "width: 100px; float: left; margin-bottom: 30px;" })
        .Items(item =>
        {
            if (((IEnumerable<SelectListItem>)ViewData["ListPanelItem"]).Count() > 0)
            {
                foreach (var o in (IEnumerable<SelectListItem>)ViewData["ListPanelItem"])
                {
                    item.Add()
                        .Text(o.Text)
                        .Visible(false);
                }
            }
            else
            {
                item.Add()
                    .Text("Select a Category");
            }
        })
        .Render();
       %>

Thanks,

[kevin]

My javascript looks like this:
 
           function onSelect(e) {
                var panelBar = $("#ListPanel");

                var item = $("li", panelBar.element)[1]; //DOM element

                alert(item.Text);

}