Resizing RadListBox on ClientResized

5 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 13 Jan 2011 Link to this post

    Hi all.

    My scenario is this:

    I have a RadListBox inside of a RadSlidingPane inside of a RadSlidingZone inside of a RadPane inside of a RadSplitter. I dynamically populate the RadListBox with some RadListBoxItems on PageLoad. The RadPane has a default width, but is resizable. The items which are displayed in the RadListBox are shown to be wordwrapped when the RadSlidingPane slides open. The user would then like to be able to resize the drag the RadSlidingPane to a larger size and have the RadListBox's width expand in order to remove the word-wrapped words.

    Using the example here: http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter#

    I was able to capture the OnClientResize event, so I am in protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e), but I do not understand how to resize the listbox's width so that it is the width of the sliding pane. Any thoughts?

    Here is a picture of my situation: http://i.imgur.com/uZ58f.png

    Thanks!

    Sean
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 17 Jan 2011 Link to this post

    Hello Sean,

    Please try calling repaint() on the RadListBox instance in the OnClientResize event.

    Greetings,
    Genady Sergeev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 18 Jan 2011 Link to this post

    Hi Telerik,

    I called repaint() and nothing seemed to happen.

    Code:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
        function ClientResized(sender, eventArgs)
        {
            $find("<%= RadListBox3.ClientID %>").repaint();
            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangeSize');
        }
        </script>
    </telerik:RadCodeBlock>

    The ajaxRequest is there just to make sure I am indeed stepping through the ClientResized function. The AjaxRequest fires and I didn't see any errors being thrown through the developer view of Chrome.

    Here's all the markup if that would be helpful.

    <%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Cormant_Web_Dashboard._Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
     
        <head id="Head1" runat="server">
            <title></title>
            <style type="text/css">
                .style1
                {
                    text-align: center;
                }
            </style>
            </head>
     
        <body>
            <form id="form1" runat="server">
     
                <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
                </telerik:RadScriptManager>
     
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script type="text/javascript">
                    function ClientResized(sender, eventArgs)
                    {
                        $find("<%= RadListBox3.ClientID %>").repaint();
                        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangeSize');
                    }
                    </script>
                </telerik:RadCodeBlock>
     
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" onajaxrequest="RadAjaxManager1_AjaxRequest" >
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="i0">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="i1">
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadListBox1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadDockZone1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadListBox2">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadDockZone1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
     
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Default">
                </telerik:RadAjaxLoadingPanel>
     
                <div class="style1">
                    CableSolve Web Dashboard<br />
                    <br />
                <br />
     
                    </div>
     
                    <telerik:RadSplitter ID="RadSplitter1" Runat="server" Skin="Web20"
                    Height="100%" Width="100%" BorderColor="White" >
                        <telerik:RadPane ID="RadPane1" Runat="server" Scrolling="None" Width="22px"
                            BackColor="#6086C1" MinHeight="500">
                            <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" >
                                <telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" Title="Settings"
                                    onclientresized="ClientResized" >
                                    <telerik:RadListBox ID="RadListBox3" runat="server" Skin="Web20"
                                        EnableDragAndDrop="True" ondropped="RadListBox3_Dropped">
                                    <Items>
                                    <telerik:RadListBoxItem Text="Horizontal Bar" />
                                    <telerik:RadListBoxItem Text="Vertical Bar" />
                                    </Items>
                                    </telerik:RadListBox>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" Title="Custom" Scrolling="Y">
                                    <telerik:RadListBox ID="RadListBox1" runat="server"
                            EnableDragAndDrop="True" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending">
                                        <ButtonSettings TransferButtons="All" />
                                    </telerik:RadListBox>
                                </telerik:RadSlidingPane>
                                <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" Title="Historical" Scrolling="Y" >
                                    <telerik:RadListBox ID="RadListBox2" runat="server"
                            EnableDragAndDrop="True" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending">
                                    </telerik:RadListBox>
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
                        <telerik:RadPane ID="RadPane2" Runat="server" MinHeight="500"
                            BorderColor="White" Scrolling="None">
                            <telerik:RadDockLayout ID="RadDockLayout1" Runat="server"
                                EnableViewState="False" onloaddocklayout="RadDockLayout1_LoadDockLayout"
                                onsavedocklayout="RadDockLayout1_SaveDockLayout" Skin="Web20">
                                <telerik:RadDockZone ID="RadDockZone1" Runat="server" Height="100%"
                                    Skin="Outlook" Width="100%" MinHeight="500px" BorderColor="White">
                                </telerik:RadDockZone>
                            </telerik:RadDockLayout>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
     
            </form>
        </body>
     
    </html>


  5. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 20 Jan 2011 Link to this post

    Hello Sean,

    Thank you for contacting us again.

    Please open a support ticket and send us a runnable version of your project, since we couldn't reproduce the problem you are experiencing.

    All the best,
    Dimitar Terziev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 20 Jan 2011 Link to this post

    Hi Telerik,

    I just solved the issue. It was a trivial mistake -- The RadListBox's width parameter was not set to 100%.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017