RadSplitter and RadPane not displaying all content

[James]

Hi,

I have been struggling with this issue for some time.  Here is the problem.  When the page is first loaded, the splitter is displaying half of the content as in step1.jpg.  However when I resize the browser width or height just tiny bit, the splitter is displaying the entire content occupying the entire page as in step2.jpg.

<telerik:RadSplitter runat="server" ID="Splitter" Width="100%" OnClientLoaded="SplitterLoaded" Height="95%">
    <telerik:RadPane runat="server" ID="LeftPane" Scrolling="Both">
        <!-- left pane is loaded dynamically -->
    </telerik:RadPane>
    <telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both" />
    <telerik:RadPane runat="server" ID="RightPane">
        <!-- right pane is loaded dynamically -->
    </telerik:RadPane>
</telerik:RadSplitter>

The content in the splitter is loaded dynamically using "knockout" js library.  Is there a way to resize the splitter to display the entire content as in step2.jpg when the page is loaded?

Please let me know if you need more information.  I really appreciate any help from you.

[Vessy]

Hello James,

I have just answered your support ticket on the matter, for convenience I will copy my reply here as well:

 

The faced behavior is related to the fact that the Splitter is rendering itself inside-out and in scenarios like your it needs to be repainted once it is shown/loaded. Can you try calling the control's repaint() when the control is populated with data (or shown) and let me know the result?

$find("Splitter").repaint();

Regards,
Vessy
Progress Telerik

[James]

Thanks for the reply. 

I assume that

$find("Splitter").repaint();

is a javascript call but when I call it from javascript script file, there is an error "Uncaught TypeError: Cannot read property 'repaint' of null".  "Splitter" is a server side id and the javascript does not know its existence.  What is the proper way of calling this?

[Vessy]

You need to keep on the page only the code that uses the server tags. For example, if you keep the ID of the control as a global variable, you can just declare it in the .aspx and use the global id variable inside the external script:

ASPX:

<script>
    window.myGloballyAccessedVariable =  "<%= txtRaise_Base.ClientID %>";
</script>

External JS file:

function myfunction() {
    var textbox = $find(window.myGloballyAccessedVariable);
}

Another option is to use pure DOM traversal and access the .control property of the elements. For more examples and ways to access client-side object references, check out this article:

• https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference 

Keep in mind that you can use the Telerik Static Library as well to facilitate finding the objects, e.g. use $telerik.findControl(parentElement, serverID):

• https://docs.telerik.com/devtools/aspnet-ajax/controls/telerik-static-client-library