RadTreeList column width adjustment

[Veenu]

Hi,

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.

[Iana Tsolova]

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,
Iana
the Telerik team

[Morten]

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?

[Marin]

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
treeList.get_columns()[0].resize(200);

All the best,
Marin
the Telerik team

[Rob]

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) {
            sender.get_columns()[1].resize(20);
            sender.get_columns()[2].resize(20);
            sender.get_columns()[3].resize(20);
        }
    </script>
</TELERIK:RadCodeBlock>

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).

[Marin]

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">
</telerik:TreeListBoundColumn>

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

Regards,
Marin
the Telerik team

[Matt]

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">                     
                    <Columns>                    
                        <telerik:TreeListBoundColumn DataField="GameID" HeaderText="GAME ID" UniqueName="GameID">
                            <HeaderStyle Width="150"/>
                        </telerik:TreeListBoundColumn>                       
                    </Columns>
</telerik:RadTreeList>               

[Marin]

Hello,

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">
</telerik:TreeListBoundColumn>

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


Regards,
Marin
Telerik