New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Select a Tile with Left Click

This article demonstrates how to let the users select a Tile with a left click instead of the default right click.

The code in Example 1 shows how to use the OnClientTileClicking event and the Client-side API of the Tile to cancel the default click event and toggle its selection state. This approach will prevent the Click event (and subsequent post back) and/or navigation. A single user action should cause one effect and in this case it will toggle the selected state of the tile.

Example 1: Select a tile with left click inside a RadTileList.

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" OnClientTileClicking="toggleTileSelection"
    SelectionMode="Multiple">
    <Groups>
        <telerik:TileGroup>
            <telerik:RadTextTile Text="first"></telerik:RadTextTile>
            <telerik:RadTextTile Text="second"></telerik:RadTextTile>
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>
<script type="text/javascript">
    function toggleTileSelection(sender, args) {
        args.set_cancel(true);
        args.get_tile().toggleSelection();
    }
</script>

Example 2: Select a standalone Tile with left click.

<telerik:RadTextTile runat="server" ID="RadTextTile1" OnClientClicking="toggleSelection" EnableSelection="true">
</telerik:RadTextTile>

<script type="text/javascript">
    function toggleSelection(sender, args) {
        args.set_cancel(true);
        sender.toggleSelection();
    }
</script>

See Also

In this article