How to adjust Metro Touch skin for TreeView

2 posts, 1 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 21 Aug 2012 Link to this post

    I have been trying to make a few simple modifications to a TreeView with the new touch skin.

    I see where spacing is larger to account for fingers rather than mouse tip, but the horizontal indents for a three-level node expansion are excessive for my applications. Bear in mind it is the width of the indent that I am concerned about, otherwise the skin works extremely well on my iPad, Android tablet and Windows Phone. (Yeah Telerik!)

    Per the demos, I have applied custom CSS to the nodes. Using a text-indent value of -16px does the trick for the text.

    However the hot-spot does not move.

    I am thinking there must be some pre-defined override that I can apply, similar to a customization provided elsewhere for RadGrid, as below. Can anyone point me in the right direction? And what property would affect the hot-spot?


    <style type="text/css">     
     div.RadGrid .rgPager .rgAdvPart    
  2. Answer
    Ivan Zhekov
    Ivan Zhekov avatar
    604 posts

    Posted 24 Aug 2012 Link to this post

    Hi, Thomas.

    The metro skin is a bit different than the rest of the controls in terms how we applied the styling, so you are going to need !important e.g.:

    .RadTreeView_MetroTouch .rtPlus,
    .RadTreeView_MetroTouch .rtMinus {
        margin-left: -16px !important;
    .RadTreeView_MetroTouch .rtTop,
    .RadTreeView_MetroTouch .rtMid,
    .RadTreeView_MetroTouch .rtBot {
        padding-left: 16px !important;

    The above rule is for the expand collapse icons and the bottom is for the general indent.

    Kind regards,
    Ivan Zhekov
    the Telerik team
    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 their blog feed now.
Back to Top