Splitter 100% Width

[Dan]

sorry eng not good. i took telerik valuation project from developer, new to telerik.

 

radsplitter on usercontrol and doesnt resize to screen width at 100% when loaded. once screen resizes from user mouse then radsplitter shows and adjusts to 100%.  please see code to duplicate your bug. please advise workaround

 

page with control

<asp:Content ID="Content1" ContentPlaceHolderID="ChildContent" runat="server">

    <div style="width: 600px; height: 600px;">
        <div id="divtest" style="display: block">
            <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 1" AutoPostBack="false" Font-Size="Medium"
                OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
            <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="test 2" AutoPostBack="false" Font-Size="Medium"
                OnClientCheckedChanged="OnClientCheckedChanged" Height="16px" GroupName="test" />
        </div>

        <div id="div-safeharborContrib" style="display: none; background-color: lightgreen;">
            <ucPSWTest:ucTest ID="ucTest" runat="server" />
        </div>
    </div>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        //![CDATA[
        function OnClientCheckedChanged(sender, args) {
            $("#divtest").fadeOut("slow", function () {
                $("#div-safeharborContrib").fadeIn("slow", function () {
                });
            });
        }
        //]]>
    </script>
</telerik:RadScriptBlock>

 

 

control uctest

<telerik:RadSplitter runat="server" ResizeMode="Proportional" Orientation="Vertical" Width="100%" Height="650px" VisibleDuringInit="false">

    <telerik:RadPane runat="server" Width="25%" />
    <telerik:RadSplitBar runat="server" CollapseMode="Forward" />
    <telerik:RadPane runat="server" BorderStyle="None" BorderWidth="0" Width="75%">
        <div>test</div>
    </telerik:RadPane>

    <telerik:RadSplitBar runat="server" CollapseMode="Backward" />
    <telerik:RadPane runat="server" Width="25%" Height="100%" BackColor="#fffed0" />

</telerik:RadSplitter>

 

 

 

 

 

[Dan]

when VisibleDuringInit="true" then shows - not 100%. resize window and splitter then 100%. please not good. need splitter to show after load and be 100%. not working

when VisibleDuringInit="false" then not shows. resize window and then shows and splitter then 100%. please not good.  

please fix for provide workaround

[Dan]

this product no support?

[Vessy]

Hi Dan,

This issue happens when the Splitter is placed into initially not visible parent like the <div id="div-safeharborContrib"> element in the provided snippet. Calling the Splitter's repaint() method just when you make the <div id="div-safeharborContrib"> visible will force the Splitter to recalculate its size:

$find("<%=RadSplitterIDHere.ClientID %>").repaint();

Regards,
Vessy
Progress Telerik

[Dan]

vessy workaround is good.

 

because RadSplitterMain in usercontrol

 

aspx page

var RadSplitterMainPS = null;

$(window).on("load", function () {
RadSplitterMainPS = $find('<%= uc.FindControl("RadSplitterMainPS").ClientID %>');
});

 

usercontrol external js file

$("#div-1").fadeOut("slow", function () {
         $("#div-2").fadeIn("slow", function () {
             RadSplitterMainPS.repaint();
         });
     });

 

i thank you for help

[Vessy]

Hi,

You are welcome, Dan - I am glad everything is working properly now.

Regards,
Vessy
Progress Telerik