webformstelerikrad-controls

Change RadPane ContentUrl with a RadButton


I need to set the content of a RadPane from another RadPane by using a RadButton. I tried using the Target property with the name of the panel, but it's not working. It works with a RadToolBarButton, but I can't use that.

Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadSplitter Height="100%" ID="RadSplitter1" Orientation="Horizontal" runat="server" Width="100%">
            <telerik:RadPane Height="36px" ID="headerPane" runat="server" Width="100%">
                <telerik:RadToolBar ID="RadToolBar1" runat="server">
                    <Items>
                        <telerik:RadToolBarButton runat="server" NavigateUrl="http://www.telerik.com" Target="contentPane" Text="Working" />
                    </Items>
                </telerik:RadToolBar>
                <telerik:RadButton ButtonType="LinkButton" AutoPostBack="False" ID="test" NavigateUrl="http://www.telerik.com" runat="server" Target="contentPane" Text="NOT WORKING" />
            </telerik:RadPane>
            <telerik:RadPane ContentUrl="about:blank" Height="500px" ID="contentPane" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>
</body>
</html>

Solution

  • I can't achieve with RadButton a simple solution using just the normal behavior of the control, so here the code i need to attach to the RadButton.OnClientClicking.

    <script type="text/javascript">
     function OnClientClicking(button, args) {
        var pane = $find(button.get_target());
        pane.set_contentUrl(button.get_navigateUrl());
        args.set_cancel(true);
     }
    </script>