This is a migrated thread and some comments may be shown as answers.

Scrollbar Size Not Correct When Adding in the Client

4 Answers 71 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Bruce
Top achievements
Rank 1
Bruce asked on 21 Oct 2013, 04:25 PM
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.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 22 Oct 2013, 08:36 AM
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.
0
Bruce
Top achievements
Rank 1
answered on 24 Oct 2013, 07:11 PM
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.
0
Bruce
Top achievements
Rank 1
answered on 30 Oct 2013, 03:44 PM
Any further word on this issue?  It appears to be a pure bug.
0
Kate
Telerik team
answered on 04 Nov 2013, 03:04 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ListBox
Asked by
Bruce
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Bruce
Top achievements
Rank 1
Kate
Telerik team
Share this question
or