RadTreeList column width adjustment

8 posts, 0 answers
  1. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 04 Feb 2011 Link to this post


    Is the functionality of Reordering the columns supported in RadTreeList. That is dragging and dropping of columns.

    Also in RadTreeList, how can we implement it so that the client can increase and decrease the width of the columns. I am using TreeListboundColumn currently.

    Thanks in advance.
  2. Iana Tsolova
    Iana Tsolova avatar
    3388 posts

    Posted 09 Feb 2011 Link to this post

    Hello Veenu,

    Columns reordering and resizing is not supported by the RadTreeList yet. We are considering these features for future version of the control.
    Other than this, to resize a column, you can try getting its HTML element and set its width manually with javascript.

    Kind regards,
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Morten
    Morten avatar
    334 posts
    Member since:
    Jul 2012

    Posted 02 Feb 2012 Link to this post

    I'm using this javascript in my RadGrids:

    function ResizeWidthToColumns(sender, eventArgs)
    	sender.get_masterTableView().get_element().style.width = "";  
    	sender.get_element().style.width = sender.get_masterTableView().get_element().offsetWidth + "px";

    Is there a similar trick for RadTreeList?

  4. Marin
    Marin avatar
    1057 posts

    Posted 03 Feb 2012 Link to this post

    Hi Morten,

     Since the Beta of the controls that was release a few days ago column resizing is now supported in RadTreeList. On the client you can also use the API to set the column width like this:

    //resizes the first column to 200px

    All the best,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Rob
    Rob avatar
    11 posts
    Member since:
    Apr 2011

    Posted 05 Mar 2012 Link to this post

    Is there a way to set the initial column size? We have some columns of data that are very short and others that are very long, so having all the columns the same size is causing the longer columns to wrap while the shorter columns are mostly empty space. The columns don't have a server-side Width property and setting MinWidth and MaxWidth doesn't seem to constrain the initial column layout.

    As a workaround, I've tried subscribing to the client-side OnTreeListCreated event, but can't get the columns to resize there either. I'm using 2012 Q1. I've added ClientSettings-ClientEvents-OnTreeListCreated="TreeListCreated" to the RadTreeList declaration and added the following code to the page.

    <TELERIK:RadCodeBlock runat="server">
        <script type="text/javascript">
            function TreeListCreated(sender, args) {

    Looking in the Error Console in Firefox, when that code executes, the following error gets logged:
    Error: this._owner._clientSettings is undefined

    I've also tried using sender.getColumnByUniqueName(uniqueName).resize(20).
  6. Marin
    Marin avatar
    1057 posts

    Posted 06 Mar 2012 Link to this post

    Hello Rob,

     You can set the initial column width through the HeaderStyle-Width property of the column (in markup or code-behind):

    <telerik:TreeListBoundColumn DataField="ID" HeaderStyle-Width="100px" UniqueName="Column1">

    The MinWidth and MaxWidth properties are used only when you resize the column to restrict the value to which it can be resized.

    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.
  7. Matt
    Matt avatar
    5 posts
    Member since:
    Aug 2013

    Posted 30 Apr 2014 Link to this post

    I don't believe the answer to Robs question was answered here. I've just had the same problem and it took me around an hour of googling to simply resize the first column in my RadTreeList to 150px. Very frustrating. Setting the headerstyle like in the post above sets the width for ALL columns. Here's how to change the width for one column only:

    Notice the HeaderStyle width within the column.

    <telerik:RadTreeList runat="server" ID="RadTreeList_onlineReport">                     
                            <telerik:TreeListBoundColumn DataField="GameID" HeaderText="GAME ID" UniqueName="GameID">
                                <HeaderStyle Width="150"/>
  8. Marin
    Marin avatar
    1057 posts

    Posted 01 May 2014 Link to this post


    Yes, in order to set initial size for the column you should set the HeaderStyle-Width property of the column itself as shown in the previous examples:
    <telerik:TreeListBoundColumn DataField="ID" HeaderStyle-Width="100px" UniqueName="Column1">

    Setting the HeaderStyle-Width of the whole TreeList will resize all the columns.


    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