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

Resizing RadListBox on ClientResized

4 Answers 168 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 14 Jan 2011, 01:30 AM
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

4 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 17 Jan 2011, 09:52 AM
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.
0
Sean
Top achievements
Rank 2
answered on 18 Jan 2011, 08:22 PM
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>


0
Accepted
Dimitar Terziev
Telerik team
answered on 20 Jan 2011, 03:16 PM
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.
0
Sean
Top achievements
Rank 2
answered on 20 Jan 2011, 06:49 PM
Hi Telerik,

I just solved the issue. It was a trivial mistake -- The RadListBox's width parameter was not set to 100%.
Tags
ListBox
Asked by
Sean
Top achievements
Rank 2
Answers by
Genady Sergeev
Telerik team
Sean
Top achievements
Rank 2
Dimitar Terziev
Telerik team
Share this question
or