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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1457 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.

     
  5. 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