TreeList Font Size under user control

3 posts, 0 answers
  1. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 21 Nov 2011 Link to this post

    I have an ASP page whose tree control I am try to replace with the Telerik TreeList.  On the page I have buttons to increase or decrease the font size of all the detail items. I am looking to vary the font size from eight to sixteen in steps of one. This means that I would have to read the current font size and then increment or decrement the font size. The changes should be made client side if possible. Can someone get me going in the right direction?

  2. Paul
    Paul avatar
    29 posts
    Member since:
    Aug 2011

    Posted 22 Nov 2011 Link to this post

    Until I can come up with a more elegant method, I took the brut force way.

    function btnFontIncrease_Click() {
        var size;
        for (var i = 0; i < _tlConfig.get_columns().length; i++) {
            size = parseInt(_tlConfig.get_columns()[i]._element.currentStyle.fontSize.toString().replace('px', ''));
            if (size < 16) size++;
            _tlConfig.get_columns()[i]._element.style.fontSize = size + 'px';
        }
        for (var i = 0; i < _tlConfig.get_dataItems().length; i++) {
            size = parseInt(_tlConfig.getItem(i)._element.currentStyle.fontSize.toString().replace('px', ''));
            if (size < 16) size++;
            _tlConfig.getItem(i)._element.style.fontSize = size + 'px';
        }
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Galin
    Admin
    Galin avatar
    526 posts

    Posted 24 Nov 2011 Link to this post

    Hello Paul,

    I suggest you to set the font-size of the RadTreeList in relative unit as em and then you need to change the font-size of its parents only.
    For example:

    CSS:
    div.RadTreeList_Default .rtlTable {
        font-size: 1em;
    }

    Javascript:
    var fzise = 12,
        parentElement = document.getElementById('radTreeListWrapper');
     
    function btnFontIncrease_Click() {
       parentElement.style.fontSize = ++fzise + 'px';
    }

    I hope this helps.

    Regards,
    Galin
    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