Height Issue With UseStaticHeaders

16 posts, 0 answers
  1. Paul
    Paul avatar
    17 posts
    Member since:
    May 2011

    Posted 27 Feb 2014 Link to this post

    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.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 04 Mar 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Mar 2014 in reply to Konstantin Dikov Link to this post

    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
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 28 Mar 2014 Link to this post

    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.

     
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 31 Mar 2014 in reply to Konstantin Dikov Link to this post

    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
  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 02 Apr 2014 Link to this post

    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.

     
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Apr 2014 in reply to Konstantin Dikov Link to this post

    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
  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Apr 2014 in reply to Jon Link to this post

    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
  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 22 Apr 2014 Link to this post

    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.

     
  11. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Apr 2014 in reply to Konstantin Dikov Link to this post

    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
  12. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Apr 2014 in reply to Jon Link to this post

    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>
  13. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 23 Apr 2014 Link to this post

    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.

     
  14. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2014 in reply to Konstantin Dikov Link to this post

    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



  15. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2014 in reply to Jon Link to this post

    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...
  16. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 25 Apr 2014 Link to this post

    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.

     
  17. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Apr 2014 in reply to Konstantin Dikov Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017