Column ResizeToFit

7 posts, 0 answers
  1. License
    License avatar
    41 posts
    Member since:
    Aug 2011

    Posted 30 May 2014 Link to this post

    I don't see any built in client-side functionality to auto-resize a column in a RadTreelist like there is in the RadGrid. Could anyone provide a resource or code on how to accomplish this with my own function?

    Here is the code I am using for a set width RadGrid to accomplish this. Essentially, it is auto-resizing all the columns then taking whatever is left over and adding it to the column of my choosing. I want to accomplish the same thing.

                function GridCreated(sender, args) {
                    var grid = sender;
                    var columns = grid.get_masterTableView().get_columns();
                    var oldGridWidth = 0;
                    var newGridWidth = 0;
                    var primaryColumnIndex;

                    for (var i = 0; i < columns.length; i++) {
                        oldGridWidth = oldGridWidth + columns[i].get_element().offsetWidth;
                        newGridWidth = newGridWidth + columns[i].get_element().offsetWidth;
                        if (columns[i].get_uniqueName().charAt(0) == "*") {
                            primaryColumnIndex = i;

                    var varWidth = newGridWidth - oldGridWidth;
                    var origWidth = columns[primaryColumnIndex].get_element().offsetWidth;
                    grid.get_masterTableView().resizeColumn(primaryColumnIndex, origWidth - varWidth);
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 Jun 2014 in reply to License Link to this post

    Hi Robert,

    Please have a look into this help documentation to change the size of the column of RadTreeList and also take a look into this online demo.

  3. License
    License avatar
    41 posts
    Member since:
    Aug 2011

    Posted 03 Jun 2014 in reply to Shinu Link to this post

    Unfortunately, that is not helpful for this particular issue. I am disabling the ability for the user to resize the columns. I am simply referring to an automated way to size the columns for best fit when the page loads based on the data contained within.

    For example, sometimes column B will have a long character string and column C with be very short. Thus, The width of column B needs to be larger and C shorter. Sometimes, the opposite is true, and C would be larger than B. Currently, if I do not set the widths at all, they are defaulting to the total width divided by the number of columns. If I hard-code a width, then when the containing data string is tool long it just cuts off and does not auto-expand the column.

    Again, this is very much a feature of the RadGrid, so I would assume the same functionality would be possible and probably very similar for the RadTreeList.
  4. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Jun 2014 Link to this post

    Hello Robert,

    RadTreeList does not have built-in functionality for accomplish such result.

    Nevertheless, what I could suggest is that you handle the client-side pageLoad() event, get reference to the RadTreeList client-side API and find the colgroup element of the table.

    Following is a very simple example demonstrating how to get reference to the colgroup element and how to change the width of the columns with your custom logic:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function pageLoad() {
                var treeList = $find("<%= RadTreeList1.ClientID%>");
                var colgroupElement = $telerik.$(treeList.get_element()).find("colgroup")[0];
                for (var i = 0; i < colgroupElement.children.length; i++) {
                    colgroupElement.children[i].style.width = ... /// set your calculated width
    <telerik:RadTreeList ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
        DataKeyNames="ID" ParentDataKeyNames="TypeID" AutoGenerateColumns="false" AllowMultiItemSelection="true">
            <telerik:TreeListSelectColumn HeaderStyle-Width="38px">
            <telerik:TreeListBoundColumn DataField="ID" HeaderText="SportID" UniqueName="ID" HeaderStyle-Width="80px"></telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="Name" HeaderText="Sport" UniqueName="Name"></telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="Country" HeaderText="Country" UniqueName="Country"></telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="City" HeaderText="City" UniqueName="City"></telerik:TreeListBoundColumn>

    Hope that helps.

    Konstantin Dikov

    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.

  5. Tim
    Tim avatar
    2 posts
    Member since:
    Jul 2016

    Posted 28 Jul 2016 in reply to Konstantin Dikov Link to this post

    I have tried your suggestion but it does not do anything on the client side pageLoad.   I wish Telerik fix this issue.    Having the long text and overlapped adjacent columns .  Please fix the autofit all columns and expand scroll horizontally when expanding treeList node.
  6. Tim
    Tim avatar
    2 posts
    Member since:
    Jul 2016

    Posted 28 Jul 2016 in reply to Shinu Link to this post

    Shinu, I don't understand, some people post answer or suggested link that is not related at all.   He said the autofit columns base on your text size and auto expand horizontal scroll too. Why posting or suggesting something when not related.  Please try to understand people question.
  7. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 02 Aug 2016 Link to this post


    As we mentioned the required functionality is not built in for the TreeList control and the provided custom approach works on our end. I'm not sure why this code does not work for you. Can you please debug the client function called in pageLoad event and see if any errors appear on your end.

    Maria Ilieva
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top