[Solved] EnableVirtualScrolling only displays one row

[Geoff]

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

[Geoff]

Oh and by-the-way, The Telerik version I am using was issued 2013 qtr3.

[Nencho]

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

 

 

[Geoff]

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