TreeList HeaderItem content not expanding to fill width

[Frank]

When I enable static headers in my TreeList, the HeaderTemplate contents from  TreeListTemplateColumn from an Item do not expand and contract as the width of the tree list changes. If you look at the way the TreeList renders it's "_rtlHeader" div when in scroll mode, you see a fixed width set (width: 908px) in this case ). This value does not change as the tree list is resized. The item rows, and the other parts of the tree list properly resize ( mostly because they are all set to %'s). I tried to use HeaderStyle to override, and set it to 100%, but it has no effect. Are you having to hard code the width px due to the scrolling, and perhaps forgot an event handler to update this value on change? Is this a bug?

<div id="ctl00_MainContent_RadTreeList1_rtlHeader" class="rtlHeader" style="width: 908px; padding-right: 17px; "><div class="rtlScroller">
        <table cellspacing="0" class="rtlTable rtlHBorders rtlVBorders rtlHVBorders">
            <colgroup>
<col style="width:23px;">
<col style="width:23px;">
<col style="width:23px;">
<col style="width:100%;">
</colgroup>
<thead>
                <tr class="rtlHeader">
                    <th scope="col" class=" rtlCF  rtlCL   " colspan="4">
                    <table width="100%">
                        <tbody><tr>
                            <td align="left" valign="top" style="width:100px; text-align:right">
                                <span style="font-weight:bold">Package: </span><br>
                                <span style="font-weight:bold">Document: </span><br>
                                <span style="font-weight:bold">Checklist: </span>
                            </td>
                            <td align="left" valign="top" style="white-space: nowrap;">
                                <span id="ctl00_MainContent_RadTreeList1_ctl02_lblPackageInfo">asd</span><br>
                                <span id="ctl00_MainContent_RadTreeList1_ctl02_lblDocumentInfo">asd2</span><br>
                                <span id="ctl00_MainContent_RadTreeList1_ctl02_lblCheckListInfo">Test2.a  Checklist on 10/31/2011</span>
                            </td>
                            <td align="center" valign="middle" style="width:100%">
                             <span id="ctl00_MainContent_RadTreeList1_ctl02_lblCompletionStatusText">3 of 3 complete.</span><br>
                             <div id="ctl00_MainContent_RadTreeList1_ctl02_RadSlider1" class="RadSlider RadSlider_Office2007" style="height:22px;width:200px;">
                        <input id="ctl00_MainContent_RadTreeList1_ctl02_RadSlider1_ClientState" name="ctl00_MainContent_RadTreeList1_ctl02_RadSlider1_ClientState" type="hidden" value="{"value":3,"selectionStart":3,"selectionEnd":0,"isSelectionRangeEnabled":false,"orientation":0,"smallChange":1,"largeChange":0,"trackMouseWheel":true,"showDragHandle":false,"showDecreaseHandle":false,"showIncreaseHandle":false,"width":"200px","height":"22px","animationDuration":100,"minimumValue":0,"maximumValue":3,"trackPosition":1,"liveDrag":true,"dragText":"Drag","thumbsInteractionMode":1}" autocomplete="off">
                    <div id="RadSliderWrapper_ctl00_MainContent_RadTreeList1_ctl02_RadSlider1" unselectable="on" style="width: 200px; height: 22px; " class="rslHorizontal"><div unselectable="on" id="RadSliderTrack_ctl00_MainContent_RadTreeList1_ctl02_RadSlider1" class="rslTrack" style="left: 0px; width: 198px; height: 6px; "><div unselectable="on" id="RadSliderSelected_ctl00_MainContent_RadTreeList1_ctl02_RadSlider1" class="rslSelectedregion" style="width: 198px; "><!-- --></div></div></div></div>
                            </td>
                            <td align="right" valign="top" style="white-space: nowrap;">
                                <a href="javascript:void(0)" class="rfdSkinnedButton"><input type="submit" name="ctl00$MainContent$RadTreeList1$ctl02$btnMarkChecklistAsComplete" value="Mark Checklist as Complete" id="ctl00_MainContent_RadTreeList1_ctl02_btnMarkChecklistAsComplete" class="rfdDecorated" tabindex="-1"></a>

                            </td>
                        </tr>
                    </tbody></table>
                </th>
                </tr>
            </thead><tbody style="display:none;">
                <tr>
                    <td colspan="1"> </td>
                </tr>
            </tbody>
        </table></div></div>

[Andrey]

Hello Frank,

I tried to replicate your scenario with a sample project, however, based on the presented  HTML code I came to the conclusion that you have just one column. Is that correct? I have created the sample project with one column to recreate your HTML output. None of the issues is replicating on my side.

About the question for the size of RadTreeList: No it is not hard coded, this size is dynamically calculated in the browser through our JavaScript functions.

Could you replicate the issue on our online demo which is demonstrating the same scenario?

Or you could post the code which is generating the erroneous behavior.

I am attaching the sample project. Give it a try and see whether you could replicate the issue with it.


Regards,
Andrey
the Telerik team