SplitterPane.ContentUrl Property

Gets or sets the URL of a specific web page to be displayed within a pane.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string ContentUrl { get; set; }

VB.NET

<DefaultValue("")>
Public Property ContentUrl As String

Property Value

Type	Default	Description
String	String.Empty	A string value that specifies a page’s URL.

Remarks

Use the ContentUrl property to specify the URL of a web page which should be loaded into, and displayed within, the current pane. A relative or an absolute URL can be used.

The ASPxClientSplitterPane.SetContentUrl and ASPxClientSplitterPane.GetContentUrl methods can be used to specify and obtain the URL of a pane’s content web page on the client side.

Note

It’s necessary to set the ContentUrl property (for instance, to any dummy value such as “about:blank”) to enable use of the client ASPxClientSplitterPane.SetContentUrl method and the server SplitterPane.ContentUrlIFrameName property. Otherwise, if the ContentUrl property is not set, the corresponding IFRAME element is not rendered within a pane. In this case, calling the ASPxClientSplitterPane.SetContentUrl method and defining the SplitterPane.ContentUrlIFrameName have no effect.

The AutoHeight property is not in effect if the ContentUrl property is specified. The example below demonstrates how to change the size of a pane based on the size of its content:

ASPX

<dx:ASPxSplitter ID="ASPxSplitter1" runat="server" ClientInstanceName="splitter"
    Width="100%">
    <Panes>
        <dx:SplitterPane ContentUrl="ContentPage.aspx" Name="ContentUrlPane">
        </dx:SplitterPane>
        <dx:SplitterPane>
        </dx:SplitterPane>
    </Panes> 
    <ClientSideEvents PaneContentUrlLoaded="CalculateSize"/>          
</dx:ASPxSplitter>

JS

function CalculateSize() {
    var iframeElement = splitter.GetPaneByName('ContentUrlPane').GetContentIFrame();
    var iframe = GetFrameOfIFrame(iframeElement);
    var doc = iframe.document;

    splitter.SetHeight(doc.documentElement.offsetHeight);
}

function GetFrameOfIFrame(iframeElement) {
    var name = (new Date()).toString();
    var backup = iframeElement.contentWindow.name;
    iframeElement.contentWindow.name = name;
    var frameIndex = this.internalGetFrameByWindowName(name);
    iframeElement.contentWindow.name = backup;
    return window.frames[frameIndex];
}

function internalGetFrameByWindowName(name) {
    var count = window.top.frames.length;
    for (var i = 0; i < count; i++) {
        if (window.top.frames[i].window.name === name)
            return i;
    }
    return -1;
}

View Example: How to resize a pane according to the height of its content specified by the ContentUrl property