Client-side Events Overview

RadTileList offers a rich set of client-side events that can fully control its behavior - they allow the developerto obtain information about the selected and clicked tiles, then change the page they will navigate to or prevent selection, navigation or the postbackaccording to the desired logic:

1. OnClientLoad—fires when the RadTileList RadTileList client-side object isinitialized.

2. OnClientTileClicking—fires when a tile is being clicked. It can be used to prevent the navigation and the postback or to change the URL.

3. OnClientTileClicked—fires after a tile is clicked. Can be used to compare the original NavigateUrl with the current and to cancel the postback.

4. OnClientTileDragging—fires while the user is dragging a tile.

5. OnClientTileDragStart—fires when the user starts dragging a tile. Can be cancelled.

6. OnClientTileDropped—fires after a tile is dropped.

7. OnClientTileDropping—fires just before a tile is dropped. Can be cancelled.

8. OnClientTileSelecting—fires just before a tile is selected and can be used to prevent the selection and the automatic postback.

9. OnClientTileSelected—fires after a tile is selected. It can be used to prevent the postback.

10. OnClientTileListDataBound—fires when the TileList data binding is finished.

11. OnClientTileDataBound—fires when the tile is bound to the fetched data.

12. OnClientTileContentTemplateDataBound—fires before rendering the ClientContentTemplate in the browser.

13. OnClientTilePeekTemplateDataBound—fires before rendering the Peek Template in the browser.

14. OnClientTileCreating—fires before the tile is initialized by the TileList.

If selection is disabled the OnClientTileSelecting and OnClientTileSelected events will not be fired at all.

If drag-and-drop is not enabled the related events will not fire (OnClientTileDragging, OnClientTileDragStart, OnClientTileDropped, OnClientTileDropping).

The following example shows how to add and remove event handlers dynamically by using the methods exposed by the TileList's Client-side API.

JavaScript

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" 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>
<input type="button" onclick="addClickingEventHandler()" value="Add new tileClicking client event handler" style="color:green"/><br />
<input type="button" onclick="removeClickingEventHandler()" value="Remove tileClicking client event handler" style="color:red"/>
<br /><br />
<input type="button" onclick="addSelectingEventHandler()" value="Add new tileSelecting client event handler"  style="color:green"/><br />
<input type="button" onclick="removeSelectingEventHandler()" value="Remove tileSelecting client event handler"  style="color:red"/>

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
	<script type="text/javascript">
		var tileList;
		function pageLoad()
		{
			tileList = $find("<%=RadTileList1.ClientID %>");
		}

		function addClickingEventHandler() {
			tileList.add_tileClicking(eventHandled);
			alert('Event handler attached to tileClicking event');
		}

		function removeClickingEventHandler() {
			tileList.remove_tileClicking(eventHandled);
			alert('Event handler has been removed from tileClicking event');
		}

		function addSelectingEventHandler() {
			tileList.add_tileSelecting(eventHandled);
			alert('Event handler attached to tileSelecting event');
		}

		function removeSelectingEventHandler() {
			tileList.remove_tileSelecting(eventHandled);
			alert('Event handler has been removed from tileSelecting event');
		}

		function eventHandled() {
			alert('An event handler has been attached to this event.');
		}
	</script>
</telerik:RadCodeBlock>