RadButton LinkType NavigateUrl can't change RadPane content

5 posts, 1 answers
  1. Alejandro
    Alejandro avatar
    13 posts
    Member since:
    Jul 2007

    Posted 19 Jun 2014 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2014 in reply to Alejandro Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alejandro
    Alejandro avatar
    13 posts
    Member since:
    Jul 2007

    Posted 20 Jun 2014 in reply to Shinu Link to this post

    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>
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jun 2014 in reply to Alejandro Link to this post

    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.
  6. Answer
    Gullo
    Gullo avatar
    1 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2014 Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017