Telerik Forums / UI for ASP.NET AJAX Forum / ListBox /

Resizing RadListBox on ClientResized

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 1 answers

Sean

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
Genady Sergeev
Admin

1600 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.
Sean

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">

<html xmlns="http://www.w3.org/1999/xhtml">

    <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>
Answer
Dimitar Terziev
Admin

1268 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.
Sean

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%.

Resizing RadListBox on ClientResized

Sean

Genady Sergeev

Sean

Dimitar Terziev

Sean