How Do I Fire event OnClientItemClicked per PanelBarItem

[Brett]

Here is my code so, far, I am trying to understand how to identify what RadPanelItem was clicked and fire the OnClientItemClickedEvent accordingly.
My application is to toggle map layers on or off depending on what PanelItem is clicked however I can't seem to figure out how to iterate the PanelItems and toggle the Layers accordingly.

BONUS:  How do add a check box or some other UI to each PanelItem to indicate if the Item is toggled on or off?

Any help would be appreciated.

Thanks.

01.<script type="text/javascript">
02.        var geocoder;
03.        var layers = [];
04.
05.        layers[0] = new google.maps.KmlLayer('OfficeLocations.kml',
06.        { preserveViewport: true });
07.
08.        layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml',
09.        { preserveViewport: true });
10.
11.        layers[2] = new google.maps.KmlLayer('police.kml',
12.        { preserveViewport: true });
13.
14.        layers[3] = new google.maps.KmlLayer('waste.kml',
15.        { preserveViewport: true });
16.        var map;
17.
18.        function initialize() {
19.            geocoder = new google.maps.Geocoder();
20.            var mapOptions = {
21.                center: { lat: 44.0527524, lng: -80.1875065 },
22.                zoom: 11
23.            };
24.            map = new google.maps.Map(document.getElementById('map-canvas'),
25.                mapOptions);
26.        }
27.
28.        function toggleLayers(i) {
29.
30.            if (layers[i].getMap() == null) {
31.                layers[i].setMap(map);
32.            }
33.            else {
34.                layers[i].setMap(null);
35.            }
36.            document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
37.        }
38.
39.        function codeAddress() {
40.            var address = document.getElementById("address").value;
41.            geocoder.geocode({ 'address': address }, function (results, status) {
42.                if (status == google.maps.GeocoderStatus.OK) {
43.                    map.setCenter(results[0].geometry.location);
44.                    marker.setPosition(results[0].geometry.location);
45.                    map.setZoom(14);
46.                }
47.                else {
48.                    alert("Geocode was not successful for the following reason: " + status);
49.                }
50.            });
51.        }
52.
53.        google.maps.event.addDomListener(window, 'load', initialize);
54.
55.    </script>
56.<script>
57. function OnClientItemClicked(sender, args) {
58. var item = args.get_item();
59.    if (item.get_level() == 0) {
60.      toggleLayers(0);    }
61. }
62. </script>
63. <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="300px" Skin="Silk" OnClientItemClicked="OnClientItemClicked">
64. <Items>
65. <telerik:RadPanelItem runat="server" Text="Government Services" Expanded="true" ImageUrl="images/icons/information.gif">
66. <Items>
67. <telerik:RadPanelItem runat="server" Text="Office Locations" ImageUrl="images/icons/building.gif">
68. </telerik:RadPanelItem>
69. <telerik:RadPanelItem runat="server" Text="Police Stations" ImageUrl="images/icons/shield.gif">
70. </telerik:RadPanelItem>
71. <telerik:RadPanelItem runat="server" Text="Waste Disposal" ImageUrl="images/icons/lorry.gif">
72. </telerik:RadPanelItem>
73. </Items>
74. </telerik:RadPanelItem>
75. </telerik:RadPanelBar>

[Ivan Danchev]

Hello,

You can see how to get the RadPanelItem's level and how to pass it as a parameter to toggleLayer in following code snippet:

function OnClientItemClicked(sender, args) {
    var itemLevel = args.get_item().get_level();
    toggleLayers(itemLevel);
}

On your second question, adding CheckBox or other controls to a PanelItem can be done with templates. You can find more info on how to use templates with RadPanelBar in the templates section of the documentation and also in the RadPanelBar Templates demo. I hope you will find them useful.

Regards,
Ivan Danchev
Telerik

 

 

[Brett]

<script>
                           function OnClientItemClicked(sender, args) {
                         var panelBar = $find("<%= RadPanelBar1.ClientID %>");
                            var itemValue = panelBar.findItemByValue();
                            if (itemValue) {
                                toggleLayers(itemValue);
                            }
                            else {
                                alert("Item with value '" + itemValue + "' not found.");
                            }
                        }
                    </script>

Thanks the helps a little, but we are not quite there.  I guess what I looking for is how I can find the PanelBarItem by value.

I am trying something like this, but it not working yet.  Any help?
​

[Brett]

Got it!  Thanks!

 

<script>
                      function OnClientItemClicked(sender, args) {
                          var itemValue = args.get_item().get_value();
                          toggleLayers(itemValue);
                      }
                  </script>