Column ResizeToFit

[License]

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;
                    columns[i].resizeToFit();
                    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);
            }

[Shinu]

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.

Thanks,
Shinu.

[License]

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.

[Konstantin Dikov]

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

<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
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadTreeList ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
    DataKeyNames="ID" ParentDataKeyNames="TypeID" AutoGenerateColumns="false" AllowMultiItemSelection="true">
    <Columns>
        <telerik:TreeListSelectColumn HeaderStyle-Width="38px">
        </telerik:TreeListSelectColumn>
        <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>
    </Columns>
</telerik:RadTreeList>

Hope that helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Tim]

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.

[Tim]

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.

[Maria Ilieva]

Hi,

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.

Regards,
Maria Ilieva
Telerik by Progress