This is a migrated thread and some comments may be shown as answers.

Height Issue With UseStaticHeaders

15 Answers 86 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 27 Feb 2014, 08:03 AM
Morning All,

I am using a RadTreeList with its height set to 100%, which is working absolutely fine.

Whenever I try and add UseStaticHeaders=true the height shrinks to a very small height and I can only see about 4 records with the rest scrolling.

Am I missing something? I tried no ScrollHeight and a ScrollHeight of 100% and it was exactly the same. I also tried putting the treelist inside a div set to 100% and that didn't work either.

Regards, Paul.

15 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 04 Mar 2014, 09:16 AM
Hello Paul,

Our developers team is aware of the issue and are already working on providing a fix for it in one of our future releases. 

For the time being you could follow the progress in our Ideas & Feedback Portal at the following link:

Please excuse us for any inconvenience caused by this.


Regards,
Konstantin Dikov
Telerik
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Jon
Top achievements
Rank 1
answered on 25 Mar 2014, 10:10 AM
Hi Konstantin,

Any progress on this ?  

I notice from the link that you provided that the bug was logged in June 13 so I'd have thought a fix would be available by now, alternatively is there a decent work around?

Regards

Jon
0
Konstantin Dikov
Telerik team
answered on 28 Mar 2014, 07:29 AM
Hello Jon,

The bug have been fixed and it should be soon introduced in one of our releases. If everything goes by plan, the fix will be available in the upcoming SP1.

For the time being you could follow the item in the Ideas & Feedback Portal, where the current status is In Development. When the status is changed to Completed, the fix should be introduced in the next upcoming release.

Once again, please excuse us for any inconvenience caused by this.


Regards,
Konstantin Dikov
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Jon
Top achievements
Rank 1
answered on 31 Mar 2014, 10:40 AM
Many thanks for the feedback - I missed the notification email.

Do you have any idea when the SP1 might be released?  Ballpark estimate?

Need to decide whether I can get away with leaving as is or if I need a temporary fix in place.

Regards

Jon
0
Konstantin Dikov
Telerik team
answered on 02 Apr 2014, 10:51 AM
Hello Jon,

I may confirm that the fix for that issue will be included in the upcoming SP1.

The SP1 should be available for download by the end of this week, so I would suggest that you wait until then and see if the fix applies for your exact scenario.

Please let us know if everything is working correctly after the upgrade.


Regards,
Konstantin Dikov
Telerik
 

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.

 
0
Jon
Top achievements
Rank 1
answered on 02 Apr 2014, 11:03 AM
Hi Konstantin

Many thanks - I got the email saying about SP1 yesterday but good to know that it should be out next week.  I'll make a note to update it then.  

Best Regards

Jon
0
Jon
Top achievements
Rank 1
answered on 22 Apr 2014, 07:22 AM
Hi Konstantin

SP1 doesn't seem to have fixed it...  SP1 being the 2014.1.403.35 release?  

Client settings section as below:

               
<ClientSettings>
    <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="450" />
    <ClientEvents OnItemClick="ShowDetailsPopup" />
</ClientSettings>


Regards

Jon
0
Konstantin Dikov
Telerik team
answered on 22 Apr 2014, 12:15 PM
Hello Jon,

I have tested a sample page on my end and everything is working correctly.

For your convenience I am attaching the sample page that I have tested. Could you please give it a try and see if everything is working correctly on your side with the latest version.

If you continue to experience the same problem, please try to modify the attached sample page in such manner, so it could replicate the problem.


Regards,
Konstantin Dikov
Telerik
 

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.

 
0
Jon
Top achievements
Rank 1
answered on 22 Apr 2014, 12:34 PM
Hi Konstantin

Thanks for that - your version does work properly but mine still fails..  There are several pages all with the same structure that fail so when I have a little time I'll work out what the difference is that causes this.  

Will be in touch..

Regards

Jon
0
Jon
Top achievements
Rank 1
answered on 22 Apr 2014, 02:09 PM
OK I've figured it.  Two issues both work towards the problem.
1) Leaving the height out of the parent div
2) Having an AJAXManager on the page (code below)

If you put the height in the parent div then it works ONLY when there is no ajax manager on the page.

it should work with the ajax manager AND you should not have to set the parent div height - as that makes the 100% pointless - why have it if you still have to set the height?

Hope all that makes sense.

Regards

Jon

        <telerik:RadAjaxManager id="uxRadAjaxManager" runat="server" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="uxRadTreeList">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="uxRadTreeList" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
0
Konstantin Dikov
Telerik team
answered on 23 Apr 2014, 10:42 AM
Hello Jon,

When the height of a div element is set with percentage, the height will be calculated based on the parent element height. If you wrap the RadTreeList in a div without set height, it is expected that the control will not be entirely visible. The same principal is actually causing the issue when you add the RadTreeList control in the RadAjaxManager AJAX settings. When you add a control in the AJAX settings, that control will be wrapped in a div element (with no height set by default).

Having the above in mind, if your parent element (wrapping the RadTreeList) have appropriate height, the only thing that you have to do to handle the RadAjaxManager scenario is to set the AjaxUpdatedControl UpdatePanelHeight property:
<telerik:RadAjaxManager id="uxRadAjaxManager" runat="server" >
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uxRadTreeList">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxRadTreeList" UpdatePanelHeight="100%" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
 
<div style="width: 100%; height: 300px;">
    <telerik:RadTreeList ID="uxRadTreeList" runat="server" OnNeedDataSource="uxRadTreeList_NeedDataSource"
        ParentDataKeyNames="ParentID" DataKeyNames="ID" Height="100%"
        AutoGenerateColumns="false" AllowSorting="true">
        <Columns>
            <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" HeaderText="Category ID">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListTemplateColumn DataField="ProductName" UniqueName="ProductName"
                HeaderText="Product">
                <ItemTemplate>
                    <%# Eval("ProductName")%><%# Eval("Quantity").ToString() != "" ? " (" + Eval("Quantity").ToString() + ")" : ""%>
                </ItemTemplate>
                <HeaderStyle Width="300px"></HeaderStyle>
            </telerik:TreeListTemplateColumn>
            <telerik:TreeListBoundColumn DataField="Price" UniqueName="Price" DataFormatString="{0:C2}"
                HeaderText="Price" DataType="System.Decimal">
                <ItemStyle HorizontalAlign="Right"></ItemStyle>
            </telerik:TreeListBoundColumn>
            <telerik:TreeListCheckBoxColumn DataField="InStock" UniqueName="InStock" HeaderText="In stock">
                <HeaderStyle Width="60px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:TreeListCheckBoxColumn>
            <telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" HeaderText="Parent Category ID">
            </telerik:TreeListBoundColumn>
        </Columns>
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="250" />
        </ClientSettings>
    </telerik:RadTreeList>
</div>

Please give this a try and let me know if it helps.


Regards,
Konstantin Dikov
Telerik
 

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.

 
0
Jon
Top achievements
Rank 1
answered on 23 Apr 2014, 11:02 AM
Hi Konstantin

Thanks for that it does help however I think that there is a bug on this.

Ideally you'd set the height to 100% and it would auto detect and fill with no specification of height however at the moment I am using ScrollHeight="450".  That should make the internal height 450 and then the pager and heading go extra.  That seems to be initially respected as on the initial page load you see the control flash at the proper size then it drops down to either the single row height or the height of the div that you mention.

Having reviewed this thread it looks like after the first post the tag being discussed changed to the Height tag rather than the ScrollHeight tag.  As such I can only suggest that the ScrollHeight tag is being ignored or is in fact broken...  

Can you look at whether this is correct?  This has certainly changed since the release last year as these pages worked previously.

Best Regards

Jon



0
Jon
Top achievements
Rank 1
answered on 23 Apr 2014, 11:18 AM
I just edited your sample and increased the static height.  This demonstrates the issue... 

The system should work as you discussed OR based on the static height - obviously if both are attempted then it will have to work with one...
0
Konstantin Dikov
Telerik team
answered on 25 Apr 2014, 10:44 AM
Hello Jon,

I am able to replicate some of the described issue on my end, but this should be consider rather as a limitation and not a bug. When the Height property of the RadTreeList is set, the ScrollHeight value is ignored, since the height of the RadTreeList should be with higher priority. 

Please note that even if the ScrollHeight value was correctly set in such scenario, the header and the pager items could not be expanded to fill the 100% of the parent element height. This is mainly due to the fact that it is not possible to set percentage height to TR or TD elements.

If you want to have the ScrollHeight set, the only possible solution would be to remove the Height from the RadTreeList and to set only the UpdatePanelHeight in the RadAjaxManager only. Furthermore, you will have to manually calculate the remaining height and apply it to the header and the pager items with the following JavaScript:
<telerik:RadAjaxManager ID="uxRadAjaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uxRadTreeList">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxRadTreeList" UpdatePanelHeight="100%" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
 
<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var treeList = $find("<%=uxRadTreeList.ClientID%>");
            var headerDiv = document.getElementById(treeList.get_id() + "_rtlHeader");
            headerDiv.children[0].style.height = "100%";
            headerDiv.children[0].children[0].style.height = "100%";
            var footerDiv = document.getElementById(treeList.get_id() + "_rtlFooter");
            footerDiv.children[0].style.height = "100%";
            var dataDiv = document.getElementById(treeList.get_id() + "_rtlData");
            var wrapperHeight = treeList.get_element().parentElement.offsetHeight;
             
            var dHeight = wrapperHeight - dataDiv.offsetHeight;
            headerDiv.style.height = (headerDiv.style.height + dHeight / 2) + "px";
            footerDiv.style.height = (footerDiv.style.height + dHeight / 2) + "px";
        }
    </script>
</telerik:RadCodeBlock>
 
<div style="width: 100%; height: 600px;">
    <telerik:RadTreeList ID="uxRadTreeList" runat="server" OnNeedDataSource="uxRadTreeList_NeedDataSource"
        ParentDataKeyNames="ParentID" DataKeyNames="ID" PageSize="30"
        AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true">
        <Columns>
            <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" HeaderText="Category ID">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListTemplateColumn DataField="ProductName" UniqueName="ProductName"
                HeaderText="Product">
                <ItemTemplate>
                    <%# Eval("ProductName")%><%# Eval("Quantity").ToString() != "" ? " (" + Eval("Quantity").ToString() + ")" : ""%>
                </ItemTemplate>
                <HeaderStyle Width="300px"></HeaderStyle>
            </telerik:TreeListTemplateColumn>
            <telerik:TreeListBoundColumn DataField="Price" UniqueName="Price" DataFormatString="{0:C2}"
                HeaderText="Price" DataType="System.Decimal">
                <ItemStyle HorizontalAlign="Right"></ItemStyle>
            </telerik:TreeListBoundColumn>
            <telerik:TreeListCheckBoxColumn DataField="InStock" UniqueName="InStock" HeaderText="In stock">
                <HeaderStyle Width="60px"></HeaderStyle>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:TreeListCheckBoxColumn>
            <telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" HeaderText="Parent Category ID">
            </telerik:TreeListBoundColumn>
        </Columns>
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="300px"/>
        </ClientSettings>
    </telerik:RadTreeList>
</div>

Please let me know if this is the result you want to achieve.



Regards,
Konstantin Dikov
Telerik
 

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.

 
0
Jon
Top achievements
Rank 1
answered on 25 Apr 2014, 11:21 AM
Hi Konstantin

No that's great - wish I'd thought to try removing the height before.  That works fine.  There is some code present that adjusts the scrollheight based on what functionality is present in the treelist (paging etc).  Removing the height from the treelist and the div fixes it.

Many thanks,

Jon
Tags
TreeList
Asked by
Paul
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Jon
Top achievements
Rank 1
Share this question
or