How Do I Fire event OnClientItemClicked per PanelBarItem

4 posts, 1 answers
  1. bslaght
    bslaght avatar
    184 posts
    Member since:
    Jun 2006

    Posted 07 Jan 2015 Link to this post

    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>
  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 08 Jan 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. bslaght
    bslaght avatar
    184 posts
    Member since:
    Jun 2006

    Posted 08 Jan 2015 in reply to Ivan Danchev Link to this post

    <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?
  5. bslaght
    bslaght avatar
    184 posts
    Member since:
    Jun 2006

    Posted 08 Jan 2015 in reply to Ivan Danchev Link to this post

    Got it!  Thanks!

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