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

Height Issue With UseStaticHeaders

15 Answers 130 Views

TreeList

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

15 Answers, 1 is accepted

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.

answered on 22 Apr 2014, 12:15 PM

RadTreeListScrollingTestPage.zip

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.

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>

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.

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

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.