This is a migrated thread and some comments may be shown as answers.

How Do I Fire event OnClientItemClicked per PanelBarItem

3 Answers 23 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 07 Jan 2015, 07:53 PM
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>

3 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 08 Jan 2015, 05:03 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Brett
Top achievements
Rank 2
answered on 08 Jan 2015, 05:21 PM
<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?
‚Äč
0
Brett
Top achievements
Rank 2
answered on 08 Jan 2015, 05:26 PM
Got it!  Thanks!

 
<script>
                      function OnClientItemClicked(sender, args) {
                          var itemValue = args.get_item().get_value();
                          toggleLayers(itemValue);
                      }
                  </script>
Tags
PanelBar
Asked by
Brett
Top achievements
Rank 2
Answers by
Ivan Danchev
Telerik team
Brett
Top achievements
Rank 2
Share this question
or