Set RadDropDownTree SelectedItem Image

5 posts, 0 answers
  1. Leg
    Leg avatar
    3 posts
    Member since:
    Oct 2013

    Posted 16 Jan 2014 Link to this post

    Set RadDropDownTree SelectedItem Image

    This sample of code is used to show in the selected item of a RadCombobox a IMAGE

    <script language="javascript" type="text/javascript">
        function showImageOnSelectedItemChanging(sender, eventArgs) {
            var input = sender.get_inputDomElement()
            input.style.background =
                "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
            input.style.paddingLeft = "22px";
        }
     
        function showFirstItemImage(sender) {
            var input = sender.get_inputDomElement()
            input.style.background =
                "url(" + sender.get_items().getItem(0).get_imageUrl() + ") no-repeat";
            input.style.paddingLeft = "22px";
        }
    </script>


    I want to do the same in a RadDropDownTree. It's possible?

    Best Regards and many thanks in advance for your help



  2.
  3. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Jan 2014 Link to this post

    Hello Leg,

    Unfortunately currently the RadDropDownTree control does not support ImageUrl property for the nodes of the dropdowntree. It has different client API and renders with a different markup compared to the RadComboBox control. You could, however,  check out this demo that demonstrates how to use images.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Andrea
    Andrea avatar
    74 posts
    Member since:
    Jan 2005

    Posted 05 Aug 2014 in reply to Kate Link to this post

    NodeTemplate isnt' usefull. What we need is ImageUrl to put node specific icons.

    Best Regards
  7. Andrea
    Andrea avatar
    74 posts
    Member since:
    Jan 2005

    Posted 05 Aug 2014 Link to this post

    I investigate a bit and I defined some local CSS classes like these:
    .buildingBkg {
        background-image:url('<%= Descor.CommonWeb.WebSharedObject.IconPath.BUILDING.Replace("~", "..")%>');
        background-repeat:no-repeat;
        background-position:left center;
        padding-left:18px !important;
    }
     
    ​    .floorBkg {
            background-image:url('<%= Descor.CommonWeb.WebSharedObject.IconPath.FLOOR.Replace("~", "..")%>');
            background-repeat:no-repeat;
            background-position:left center;
            padding-left:18px !important;
        }

    Then in the server side NodeDataBound event I have set the DropDownTreeNode CssClass property, according to some logics:
    Dim dNode As DropDownTreeNode = e.DropDownTreeNode
    Dim levelName As String = _spatialTreeLevels.ElementAt(dNode.Level - 1).ToString 'getLevelName(dNode.Level - 1)
    Select Case levelName
          Case "REGIONI"
                dNode.CssClass = "regionBkg"
          Case "CITTA"
                dNode.CssClass = "cityBkg"
           Case "COMPRENSORI"
                dNode.CssClass = "districtBkg"
            Case "EDIFICI"
                 dNode.CssClass = "buildingBkg"
    ...
  8.
  9. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 07 Aug 2014 Link to this post

    Hello,

    Thank you for sharing this with the community.

    Regards,
    Aneliya Petkova
    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.

     
Back to Top