RadTileList redirect to another page

[WebTeam]

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>

[Marin Bratanov]

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