Scrollbar Size Not Correct When Adding in the Client

5 posts, 0 answers
  1. Bruce
    Bruce avatar
    17 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2013 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Oct 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bruce
    Bruce avatar
    17 posts
    Member since:
    Oct 2010

    Posted 24 Oct 2013 Link to this post

    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.
  5. Bruce
    Bruce avatar
    17 posts
    Member since:
    Oct 2010

    Posted 30 Oct 2013 Link to this post

    Any further word on this issue?  It appears to be a pure bug.
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017