EnableVirtualScrolling only displays one row

4 posts, 0 answers
  1. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 03 Jul 2014 Link to this post

    Hi,
        I'm having a problem with cascading RadDropDownLists where the EnableVirtualScrolling property is enabled. I have three lists that cascade so that each selection filters the available options on the next list. When I first set the screen up, none of the lists had virtual scrolling enabled. It turned out that there was quite a long list for certain combinations of filtering. When the list length exceeded the available space on the page, the user was unable to access the options lower down. After a bit of reading, I discovered the EnableVirtualScrolling property and it seemed to work great. However, I found that the drop-down lists on the lower two tiers of the cascade would only display the first record/row of their available options after a postback from the preceding  lists.

    Here's my code:
    <telerik:RadDropDownList ID="DropDownList1" DataSourceID="SQLDataSource1"
        DataValueField="Table1_Id" DataTextField="Table1_Text" Width="460px"
        EnableVirtualScrolling="true" DropDownHeight="250px" DropDownWidth="460px"
        AppendDataBoundItems="true" AutoPostBack="true" Skin="Metro" runat="server" >
    </telerik:RadDropDownList>
     
     
    <telerik:RadDropDownList ID="DropDownList2" DataSourceID="SQLDataSource2"
        DataTextField="Table2_Id" DataValueField="Table2_Text" Width="460px"
        EnableVirtualScrolling="true" DropDownHeight="250px" DropDownWidth="460px"
        AppendDataBoundItems="true" AutoPostBack="true" Skin="Metro" runat="server">
    </telerik:RadDropDownList>
     
     
    <telerik:RadDropDownList ID="DropDownList3" DataSourceID="SQLDataSource3"
        DataTextField="Table3_Id" DataValueField="Table3_Text" Width="460px"
        EnableVirtualScrolling="true" DropDownHeight="250px" DropDownWidth="460px"
        AppendDataBoundItems="true" AutoPostBack="true" Skin="Metro" runat="server">
    </telerik:RadDropDownList>
     
     
    <%-- Data Source for DropDownList1 --%>
    <asp:SqlDataSource ID="SQLDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
        ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
        SelectCommand="Select_Table1Data"
        SelectCommandType="StoredProcedure">
     
        <SelectParameters>
            <asp:SessionParameter Name="Customer_id" SessionField="Customer_Id" Type="Int64" />
        </SelectParameters>
    </asp:SqlDataSource>
     
     
    <%-- Data Source for DropDownList2 --%>
    <asp:SqlDataSource ID="SQLDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
        ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
        SelectCommand="Select_Table2Data"
        SelectCommandType="StoredProcedure"
        >
        <SelectParameters>
            <asp:SessionParameter Name="Customer_id" SessionField="Customer_Id" Type="Int64" />
            <asp:ControlParameter Name="Table1_Id" ControlID="DropDownList1" PropertyName="SelectedValue" DefaultValue="0" Type="Int64" />
        </SelectParameters>
    </asp:SqlDataSource>
     
     
    <%-- Data Source for DropDownList3 --%>
    <asp:SqlDataSource ID="SQLDataSource3" runat="server"
        ConnectionString="<%$ ConnectionStrings:RAMtrack %>"
        ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>"
     
        SelectCommand="Select_Table2Data"
        SelectCommandType="StoredProcedure"
        >
        <SelectParameters>
            <asp:SessionParameter Name="Customer_id" SessionField="Customer_Id" Type="Int64" />
            <asp:ControlParameter Name="Table2_Id" ControlID="DropDownList2" PropertyName="SelectedValue" DefaultValue="0" Type="Int64" />
        </SelectParameters>
    </asp:SqlDataSource>
     
     
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
     
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DropDownList2" LoadingPanelID="pnl_SystemAffected" />
                    <telerik:AjaxUpdatedControl ControlID="DropDownList3" LoadingPanelID="pnl_SystemAffected" />
                </UpdatedControls>
            </telerik:AjaxSetting>
     
            <telerik:AjaxSetting AjaxControlID="DropDownList2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DropDownList3" LoadingPanelID="pnl_SystemAffected" />
                </UpdatedControls>
            </telerik:AjaxSetting>
     
        </AjaxSettings>
    </telerik:RadAjaxManager>

    If I remove the [EnableVirtualScrolling="true" DropDownHeight="250px" DropDownWidth="460px"], it all works fine (except that some lists are too long). Am I missing another property or setting somewhere?

    Geoff
  2. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 03 Jul 2014 in reply to Geoff Link to this post

    Oh and by-the-way, The Telerik version I am using was issued 2013 qtr3.
  3. Nencho
    Admin
    Nencho avatar
    1493 posts

    Posted 08 Jul 2014 Link to this post

    Hello Geoff,

    I was able to replicate the issue you described, base on the provided code snippet. I have forwarded it to our developer team for further investigation. In addition, I have updated your Telerik Points for pointing that out.

    In addition, the VirtualScrolling is helpful in a very large datasource scenario, like described in our documentation article here. As you mentioned that the initial issue you had faced is the DropDown height, which exceeds the window I would suggest you to use only the DropDownHeigth property in order to manage the Height.

    Regards,
    Nencho
    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.

     
  4. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2014 in reply to Nencho Link to this post

    Nencho,
        Many thanks for your response, I appreciate the points :-) I have done as you suggest by just using the DropDownHeigth property and it works fine.

    Regards

    Geoff
Back to Top