TreeList auto-collapsing expanded items almost immediately after page load

3 posts, 0 answers
  1. Ilian
    Ilian avatar
    1 posts
    Member since:
    Jul 2017

    Posted 26 Jul Link to this post

    Здравейте! Hi!

    I am experiencing unusual behavior with a RadTreeList that's residing inside a user control (.ascx).

    Note: The user control is programmatically/dynamically added on Page_Load from the parent page.

     

    The RadTreeList definition inside the user control is as follows:

        <telerik:RadTreeList ID="RadTreeList1" runat="server"

            ParentDataKeyNames="ParentId" DataKeyNames="DataId" AllowPaging="false"
            AutoGenerateColumns="false" AllowSorting="false" ExpandCollapseMode="Client" AllowMultiItemSelection="true">

            <Columns>
                <telerik:TreeListBoundColumn DataField="FullName" UniqueName="FullName" HeaderText="FullName">
                </telerik:TreeListBoundColumn>
            </Columns>
        </telerik:RadTreeList>

     

    In the code behind of the user control, I do this inside Page_Load():

               RadTreeList1.DataSource = lst; // lst is of type List<object> and is populated with valid data

               RadTreeList1.ExpandAllItems();

    When the page containing this user control loads, one can see that the RadTreeList is rendered initially in a fully expanded state, but about half a second or less later, all the expanded nodes are auto-collapsed by the client-side.

    The stack trace (snapped in the "middle" of toggling an expanded node back to a collapsed state) from Dev Tools in Chrome is:

    toggleExpandCollapse (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:22075)
    initialize (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:21971)
    endUpdate (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:2664)
    endCreateComponents (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:3406)
    _raiseInit (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:3548)
    initialize (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:3424)
    b (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:3504)
    a (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager2_TSM&compress=1&_TSM_CombinedScri…:3515)

     

    If I change the ExpandCollapseMode of the RadTreeList to "Server" (from "Client"), the RadTreeList is rendered in expanded state, and the client side does not auto-collapse it (expected behavior).

    The problem with "Server" expansion mode is that it causes a full page postback on every node expand/collapse icon click, which is highly undesirable in our situation.

     

    Please advise on how to avoid the auto-collapse of a fully expanded RadTreeList while in "Client" ExpandCollapseMode.

     

    Thank you!

     

    Additional Info: Telerik.Web.UI version is 2016.2.607.45

     

  2. Peter
    Peter avatar
    5 posts
    Member since:
    Jun 2015

    Posted 22 Oct Link to this post

    Hi,

    I experience a simuliar behaviour with 2017.3.... Components.

    Is this already solved?

    Regards Peter

  3. Eyup
    Admin
    Eyup avatar
    3333 posts

    Posted 25 Oct Link to this post

    Hello Peter,

    Generally, ff you want to expand all items by default, please use the built-in method of the RadTreeList:
    protected void rtlOrderDetails_PreRender(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadTreeList treeList = sender as RadTreeList;
            treeList.ExpandAllItems();
        }
    }

    However, given that you are using the following load mode:
    <telerik:RadTreeList ... ExpandCollapseMode="Client">
    </telerik:RadTreeList>

    You can use this approach instead to achieve this requirement:
    function buttonClick() {
        var treelist = $find('<%= RadTreeList1.ClientID %>');
        var items = treelist.get_dataItems();
        for (var i = 0; i < items.length; i++) {
            items[i].set_clientExpanded(false);
            items[i].toggleExpandCollapse();
        }
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top