This is a migrated thread and some comments may be shown as answers.

RadButton LinkType NavigateUrl can't change RadPane content

4 Answers 106 Views
Button
This is a migrated thread and some comments may be shown as answers.
Alejandro
Top achievements
Rank 2
Alejandro asked on 19 Jun 2014, 02:01 PM
Hi, i want to change the ContentUrl of a RadPane by using a RadButton of type LinkType. I'm using 2012.3.1308.40 and 2014.2.618.40.

I think i'm missing something because there were a simple and neat mode to achieve this without using an iframe inside the RadPanel or additional javascript.

01.<!DOCTYPE html>
03.<head runat="server">
04.    <title></title>
05.    <style type="text/css">
06.        html, body, form {
07.            width: 100%;
08.            height: 100%;
09.            padding: 0;
10.            margin: 0;
11.            border-collapse: collapse;
12.        }
13.    </style>
14.</head>
15.<body>
16.    <form id="form1" runat="server">
17.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
18.        <telerik:RadSplitter Height="100%" ID="RadSplitter1" Orientation="Horizontal" runat="server" Width="100%">
19.            <telerik:RadPane Height="36px" ID="headerPane" runat="server" Width="100%">
20.                <telerik:RadButton ButtonType="LinkButton" ID="test" NavigateUrl="http://www.telerik.com" runat="server" Target="contentPane" Text="TEST" />
21.            </telerik:RadPane>
22.            <telerik:RadPane ContentUrl="about:blank" Height="500px" ID="contentPane" runat="server">
23.            </telerik:RadPane>
24.        </telerik:RadSplitter>
25.    </form>
26.</body>
27.</html>

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 20 Jun 2014, 05:09 AM
Hi Alejandro,

Please try  the following code snippet which works fine at my end.

ASPX:

<telerik:RadSplitter Height="100%" ID="RadSplitter1" Orientation="Horizontal" runat="server"
    Width="100%">
    <telerik:RadPane Height="36px" ID="headerPane" runat="server" Width="100%">
        <telerik:RadButton ButtonType="LinkButton" ID="test" AutoPostBack="false" OnClientClicked="changeContentURL" runat="server" Target="contentPane" Text="TEST" />
    </telerik:RadPane>
    <telerik:RadPane Height="500px" ID="contentPane" runat="server">
    </telerik:RadPane>
</telerik:RadSplitter>

JavaScript:
function changeContentURL(sender, args) {
    var radPane = $find("<%=contentPane.ClientID%>");
    radPane.set_contentUrl("Width.aspx");
}

Thanks,
Shinu.
0
Alejandro
Top achievements
Rank 2
answered on 20 Jun 2014, 07:12 AM
That's a viable approach, thank you. But i really don't know why i can't obtain the same simple behavior of an example like this:

<telerik:RadToolBar ID="RadToolBar1" runat="server">
    <Items>
        <telerik:RadToolBarButton runat="server" NavigateUrl="http://www.telerik.com" Target="contentPane" Text="Working" />
    </Items>
</telerik:RadToolBar>
0
Shinu
Top achievements
Rank 2
answered on 23 Jun 2014, 03:53 AM
Hi Alejandro,

I guess on clicking of a RadToolBar button you want to navigate to a new page and load RadPane. Please try the below code snippet which works fine at my end.

ASPX:
<telerik:RadButton ButtonType="LinkButton" ID="test" AutoPostBack="false"  runat="server" Target="contentPane" Text="TEST" OnClientClicking="changeContentURL" />

JavaScript:
function changeContentURL(sender, args) {
    window.open(sender.get_navigateUrl(), '_blank');
    args.set_cancel(true);
    var radPane = $find("<%=contentPane.ClientID%>");
    radPane.set_contentUrl("Width.aspx");
}

Thanks,
Shinu.
0
Accepted
Gullo
Top achievements
Rank 1
answered on 24 Jun 2014, 07:08 AM
Hi Alejandro,

You have to insert javascript to change the Pane content.

Probably the best way to achieve a clean solution is to modify a bit Shino's answer:
<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>

Thank you Shino!

Tags
Button
Asked by
Alejandro
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Alejandro
Top achievements
Rank 2
Gullo
Top achievements
Rank 1
Share this question
or