RadTileList redirect to another page

2 posts, 0 answers
  1. WebTeam
    WebTeam avatar
    5 posts
    Member since:
    Oct 2012

    Posted 19 Jun 2013 Link to this post

    For anyone wanting to redirect to another page or use the RadTileList as a menu you will quickly find the navigation URL opens a new tab. To avoid this behavior you can simply remove the navigation URL property and replace it with some javascript.

    Here is a simple example using 3 tiles and 3 pages to redirect to.

    <telerik:RadTileList runat="server" EnableThemeing="true" TileRows="1" SelectionMode="none" OnClientTileClicked="OnClientTileClicked">
                <Groups>
                    <telerik:TileGroup>
                        <telerik:RadIconTile Name="Editor" Shape="Wide" Target="_blank" ImageUrl="http://demos.telerik.com/aspnet-ajax/tilelist/Img/Icons/icon_imageeditor.png" BackColor="#00b37d" Title-Text="Image Editor">
                             <PeekTemplate>
                                  <img src="http://demos.telerik.com/aspnet-ajax/tilelist/Img/Wide/img_edit.png" alt="DevTools" style="display: block;" />
                             </PeekTemplate>
                             <PeekTemplateSettings Animation="Slide" AnimationDuration="800" Easing="easeInOutBack"
                                  ShowInterval="5000" CloseDelay="5000" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                        </telerik:RadIconTile>
                        <telerik:RadIconTile Name="OrgChart" Target="_blank" Shape="Square" ImageUrl="http://demos.telerik.com/aspnet-ajax/tilelist/Img/Icons/icon_orgchart.png">
                             <Title Text="OrgChart"></Title>
                        </telerik:RadIconTile>
                        <telerik:RadIconTile Name="ListView" Target="_blank" Shape="Square" ImageUrl="http://demos.telerik.com/aspnet-ajax/tilelist/Img/Icons/icon_listview.png" BackColor="#82c92f">
                             <Title Text="ListView"></Title>
                        </telerik:RadIconTile>
                    </telerik:TileGroup>
                </Groups>
     
            </telerik:RadTileList>
            <script type="text/javascript">
                function OnClientTileClicked(tileList, args) {
                    var tile = args.get_tile();
                    var url = args.get_oldValue();
     
                    //confirm navigation if url has been specified
                    if (tile.get_name() == "OrgChart") {
                        window.location = 'http://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx';
                    }
                    if (tile.get_name() == "Editor") {
                        window.location = 'http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx';
                    }
                    if (tile.get_name() == "ListView") {
                        window.location = 'http://demos.telerik.com/aspnet-ajax/listview/examples/overview/defaultcs.aspx';
                    }
                }
            </script>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 19 Jun 2013 Link to this post

    Hello Andrew,

    Thank you for sharing your experience with us. Where the page a tile points to is controlled by its Target property as described here: http://www.telerik.com/help/aspnet-ajax/tilelist-navigation.html. The Target property in the snippet you pasted is set to _blank and it is, therefore, expected that the browser will open a new tab/window for the navigation.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top