Scrollbar Size Not Correct When Adding in the Client

[Bruce]

I'm using the same code used in the documentation to add items to a RadListBox on the client side.  This is the page:

http://www.telerik.com/help/aspnet-ajax/listbox-client-object-api.html


Here is my ASPX:

<telerik:RadListBox ID="lstItems" Width="298" Height="495" runat="server" OnClientSelectedIndexChanging="changingItem">
</telerik:RadListBox>

And here is my JavaScript:
$find(pnlItemsId).expand();
    var cboItems = $find(cboIntelligentSearchId).get_items();
    var lstItems = $find(lstItemsId);
    lstItems.trackChanges();
    var ifrContent = $("#ifrContent")[0];
    var currentItemKey;
    if (ifrContent && ifrContent.contentWindow.getCurrentItemKey && typeof ifrContent.contentWindow.getCurrentItemKey == 'function')
    {
        currentItemKey = ifrContent.contentWindow.getCurrentItemKey();
    }
    var listItems = lstItems.get_items();
    listItems.clear();
    for (var i = 0; i < cboItems.get_count(); i++)
    {
        var cboItem = cboItems.getItem(i);
        var itemName = cboItem.get_text();
        var smItemId = cboItem.get_value();
        var item = new Telerik.Web.UI.RadListBoxItem();
        item.set_text(itemName);
        item.set_value(smItemId);
        listItems.add(item);
        if (currentItemKey && currentItemKey == smItemId)
        {
            candidateSelectedNode = item;
            selectedNode = item;
            item.select();
        }
    }
    lstItems.commitChanges();

When the JS finishes, the items appear in the ListBox, but the scrollbar appears as if it has, maybe, three items below the bottom of the ListBox and using the scrollbar shows about three additional items.  However, approximately 100 items were added.  The only way to get them to appear is to click on one of the items and use the down arrow to scroll to the bottom.

I've poked through the documentation as well as JS objects available on the ListBox and I've found no solution to the problem.  Thanks in advance for your help.

[Princy]

Hi Bruce,

Such a behavior is not expected. Please have a look into the following sample code which deals the same scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource1"
    DataTextField="OrderID">
</telerik:RadComboBox>
<telerik:RadListBox ID="RadListBox1" runat="server" Width="150" Height="200">
</telerik:RadListBox>
<telerik:RadButton ID="RadButton1" runat="server" Text="Add Items" OnClientClicked="OnClientClicked1"
    AutoPostBack="false">
</telerik:RadButton>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT [OrderID], [CustomerID] FROM [Orders]">
</asp:SqlDataSource>

JavaScript:

<script type="text/javascript">
    function OnClientClicked1(sender, args) {
        var list = $find("<%=RadListBox1.ClientID %>");
        var cboItems = $find("<%=RadComboBox1.ClientID %>").get_items();
        list.trackChanges();
        for (var i = 0; i < cboItems.get_count(); i++) {
            var cboItem = cboItems.getItem(i);
            var itemName = cboItem.get_text();
            var item = new Telerik.Web.UI.RadListBoxItem();
            item.set_text(itemName);
            list.get_items().add(item);
        }
        list.commitChanges();
    }
</script>

Please provide your full code if it doesn't help.
Thanks,
Princy.

[Bruce]

I believe I have discovered the cause of the problem.  I have my ListBox inside a splitter pane.  When I move the ListBox to outside of the pane, it works just fine.  Here is the ASPX that is not working:

 <telerik:RadSplitter ID="splItem" runat="server" Width="950" Height="500">
<telerik:RadPane ID="pnlItems" runat="server" Width="200" Collapsed="true" OnClientCollapsing="collapsingList">
<telerik:RadListBox ID="lstItems" Width="298" Height="495" runat="server"
OnClientSelectedIndexChanging="changingItem">
</telerik:RadListBox>
</telerik:RadPane>
<telerik:RadSplitBar ID="barSplitter" runat="server" EnableResize="false" CollapseMode="Forward" Width="0"/>
<telerik:RadPane ID="pnlContent" runat="server" Width="650">
<iframe id="ifrContent" scrolling="no" style="height:480px"></iframe>
</telerik:RadPane>
</telerik:RadSplitter>

I move the RadListBox to outside of the RadSplitter and it functions as expected.

[Bruce]

Any further word on this issue?  It appears to be a pure bug.

[Kate]

Hello Bruce,

Can you please send me a very simplified runnable page how exactly you are using the controls along with the needed steps for replicating the described behavior? I would kindly ask you to open a separate support ticket where you can attach the needed files so I can inspect them and check if this is a bug of the control.

Regards,
Kate
Telerik