ClientID in Content Page

[Jasper]

Hi,

I'm trying to get the ClientID (from within a master page) of a RadPane which is part of a content page .

Default.Master

//...
<script type="text/javascript">
          function pageLoad() {
              var dataPane = $find('<%= this.SplitterPlaceholder.FindControl("LeftContentPane").ClientID %>');
              dataPane.setVarSize($(window).width());
          }
    </script>
//...
    <telerik:RadSplitter ID="RadSplitter1" Height="100%" runat="server"  ClientIDMode="AutoID">
        <telerik:RadPane ID="ContentPane" runat="server">
            <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Vertical">
                <telerik:RadPane ID="RadPane1" runat="server" ContentUrl="Data.aspx" />

                <asp:ContentPlaceholder ID="SplitterPlaceholder" runat="server" />

                <telerik:RadSplitBar ID="ContentSplitBar" runat="server" />
                <telerik:RadPane ID="RightContentPane" ContentUrl="Map.aspx" runat="server">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
        <telerik:RadPane ID="BottomPane" runat="server">
        </telerik:RadPane>
    </telerik:RadSplitter>
//..

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UIProject.Default" %>
<asp:Content id="Pane" ContentPlaceholderID="SplitterPlaceholder" runat="server">
    <telerik:RadPane ID="LeftContentPane" runat="server" ContentUrl="Data.aspx" />
</asp:Content>

<%= this.SplitterPlaceholder.FindControl("LeftContentPane").ClientID %> returns (SplitterPlaceholder_LeftContentPane), but the page does not contain an element with this id and therefore $find() returns null and setVarSize() fails.

I also tried to use a public property in Default.aspx.cs to access the ClientID from Default.Master, but the result was the same.

I know that it can be tricky to access controls in content pages, but afaik it should work this way. Did I overlook something or is this scenario not supported by RadControls/ASP.NET?

Best Regards

[Marin Bratanov]

Hello Jasper,

I am having difficulties reproducing your scenario, so please provide more information on your layout or even a runnable project so that I can investigate further.
Based on the current information I can give you the following suggestions:

• Do not put the splitter in different pages, use one and add external content in the panes, instead of adding the whole pane externally. This makes it a lot easier in respect to getting references to the objects, maintaining your code and designing the whole site.
• If you wish to use different pages you can create a function in each of them that returns a reference to the appropriate pane and call the function from the page where you need the reference.

Here is a small example. I am using generic values to avoid confusing the ones from your site:
This goes in the page where your external pane resides:

<script type="text/javascript">
    function getPane()
    {
        var splitter = $find("<%= RadSplitter1.ClientID  %>");
        return splitter.getPaneById('<%=RadPane1.ClientID%>');
    }
</script>

Call this function in the container where you need to manipulate the pane:

<script type="text/javascript">
     var pane = getPane();
     var paneHeight = pane.get_height();
    //more custom logic here
</script>

Best wishes,
Marin
the Telerik team

[Jasper]

Hi Marin,

I tried to put the (nested) splitter in different pages in order to avoid to manage layout in code (JS or code behind) and keep the layout more flexible.

Thanks for your workaround. I haven't tested it yet but think it should work.

I have stripped my project to a minimum. You can download it from http://dl.dropbox.com/u/6487363/NUI.zip. 


Best Regards

[Marin Bratanov]

Hi Jasper,

I see that you are using the $(document).ready() event handler. The issue here is that AJAX controls are loaded after the markup itself and therefore might be non existing at that point. You should use Sys.Application.add_load() instead.

I also moved the external pane in its splitter declaration and changed the dataPane variable initialization to the standard $find("<%=LeftContentPane.ClientID %>");. Now everything seems to be working fine and I no longer get undefined values.

On a side note I would suggest that you check the $(window).resize() event handler, especially the mapPane.setVarSize(mapPane.get_minWidth()); line as this would set the pane's width do 200 pixels unless the browser window is maximized and I am not sure that this is the intended effect.
For your convenience I have attached your project with my modifications. Note that I have deleted the Inherits="NUI.Data" and the other similar statements since I do not have these dependencies.


All the best,
Marin
the Telerik team