OnClientTileClicked

The OnClientTileClicked event is raised after a tile is clicked and therefore after the OnClientTileClicking event and before the server-side OnTileClick event. It is not cancellable. If the OnClientTileClicking event is cancelled it will not be fired.

This event can be used to monitor navigation and postbacks and obtain information for the tile that is clicked. If AutoPostBack is true navigation will not be performed.

The original URL of the tile and the current one can be obtained through the event arguments object, because the URL the browser will navigate to can be changed dynamically in the OnClientTileClicking event.

The event handler receives two arguments:

1. the RadTileList object that fired the event

2. an event arguments object that exposes the following methods

OnClientTileClicked event arguments object

Name	Return type	Description
get_newValue()	string	Gets the current URL the tile will navigate to. It could have been changed dynamically in the OnClientTileClicking event.
get_oldValue()	string	Gets the original NavigateUrl of the clicked tile. It can be used to compare the current and original values.
get_tile()	RadBaseTile client-side object	Gets a reference to the tile that is clicked.

The following example shows how to get and set the navigateURL property of a Tile in the OnClientTileClicked event.

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" OnClientTileClicked="OnClientTileClicked" AutoPostBack="false" SelectionMode="Single">
    <Groups>
        <telerik:TileGroup>
            <telerik:RadTextTile Name="Sample Text Tile" Text="Lorem ipsum dolor sit amet" Title-Text="Sample"></telerik:RadTextTile>
        </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 (url != "") {
            confirm(String.format('Page will navigate to {0}', url));
        }
        //request navigation url to be set
        else {
            tile.set_navigateUrl(prompt("No url specified. Please enter a navigation url:"));
        }
    }
</script>

The code snippet below shows how to use the OnClientClicked event to check if the navigation URL of a Tile has been set to a new value.

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" SelectionMode="Single"
    OnClientTileClicking="OnClientTileClicking" OnClientTileClicked="OnClientTileClicked">
    <Groups>
        <telerik:TileGroup>
            <telerik:RadTextTile Name="Sample Text Tile" Text="Lorem ipsum dolor sit amet" Title-Text="Sample"></telerik:RadTextTile>
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>

<script type="text/javascript">
    function OnClientTileClicking(tileList, args) {
        args.set_value("https://www.telerik.com");
        alert("New Navigation URL set to \'http//:www.telerik.com\'.");
    }

    function OnClientTileClicked(tileList, args) {
        var oldValue = args.get_oldValue();
        var newValue = args.get_newValue();
        if (oldValue != newValue) {
            alert(String.format("Navigation URL changed from \'{0}\' to \'{1}\'.", oldValue, newValue));
        }
    }
</script>