How to display TilePeekTemplate on page load

[Sanjay]

Hi I am using RadTileList control with DataBinding. It's working fine as long as the TilePeekTemplate item displayed on mouse over. But I need it to display on page load. How can I make this happen?

[Marin Bratanov]

Hello Sanjay,

If the peek templates are that important you can consider putting the data you have for the peek template in a content template of a tile so it is the first thing shown by the tile: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-contenttemplatetile.html.

Otherwise, you can

1. use the OnClientLoad event of the tile list (http://www.telerik.com/help/aspnet-ajax/tilelist-client-side-events-onclientload.html)
2. traverse the tiles (http://www.telerik.com/help/aspnet-ajax/tilelist-client-side-tilelist-api.html - see the get_allTiles() method)
3. show their peek templates via their API (http://www.telerik.com/help/aspnet-ajax/tilelist-client-side-tile-api.html - see the showPeekTemplate() method).

I hope this helps you choose the best course of action for your setup.

Regards,

Marin Bratanov
Telerik

 

 

[Sanjay]

Thanks Marin. But here I am not using peektemplate. it's TitlePeakTemplate as I am binding my datasSourse to it. The <DataBindings> has only one child element <TilePeekTemplate> that allows may server side '<%#databinder'. Here is the complete code. I need to remove the mouse over event & display the whole content on page load. Does any other template provide data_binding?

​<telerik:RadTileList ID="RadTileList1" runat="server" AppendDataBoundItems="false" Font-Bold="true"
Font-Size="X-Large" Width="100%" TileRows="4" OnTileDataBound="RadTileList1_OnTileDataBound"
OnTileCreated="RadTileList1_OnTileCreated" SelectionMode="Single" EnableDragAndDrop="false"
OnTileClick="RadTileList1_TileClick" AutoPostBack="true" ScrollingMode="None" >
<DataBindings>
<CommonTileBinding TileType="RadImageAndTextTile" Shape="Wide" DataNameField="MEMBER_CAPTION"/>
<ImageAndTextTileBinding DataTextField="MEMBER_CAPTION" />
<TilePeekTemplate>
<div id="dvTile" runat="server" style="background-color:transparent;font-size:small;" >
<h3 style="text-align:center;"><%#DataBinder.Eval(Container.DataItem, "MEMBER_CAPTION")%></h3>
<strong>Clicks:</strong>
<%#DataBinder.Eval(Container.DataItem, "Clicks")%>
<br />
<strong>Impressions:</strong>
<%#DataBinder.Eval(Container.DataItem, "Impressions")%>
<br />
<strong>Click Thru Rate:</strong>
<%#String.Format("{0:P2}.", DataBinder.Eval(Container.DataItem, "Click_Thru_Rate"))%>
<br />
<strong>Conversions:</strong>
<%#DataBinder.Eval(Container.DataItem, "Conversions")%>
</div>
</TilePeekTemplate>
</DataBindings>
</telerik:RadTileList>

[Sanjay]

*TilePeekTemplate

[Marin Bratanov]

Hi Sanjay,

The ContentTemplateTile I offered in my previous post lets you define the desired layout that will be shown in the initial load: http://www.telerik.com/help/aspnet-ajax/tilelist-tiles-contenttemplatetile.html.

You can see how to use data binding with it here: http://www.telerik.com/help/aspnet-ajax/tilelist-databinding-basics.html - see the last section in the article at the end.

If this is not what you need, you can use the JavaScript approach I offered in my previous post.


Regards,

Marin Bratanov
Telerik

 

 

[Sanjay]

Thanks once again Marin for trying to help me out. I tried to use <ContentTemplateTileBinding> & some how the Tile was generating, but no data displaying. Those where blank screen. I used the same <ContentTemplateTileBinding> with <TilePeekTemplate> both with same data binding contains, but only <TilePeekTemplate> was showing information & not <ContentTemplateTileBinding>          <ContentTemplate>. I am sure I am missing some thing. same data, same binding but TilePeekTemplate showing the data but not ContentTemplateTileBinding. Anyway, I got one more alternative way to handle. Now using <TilePeekTemplate> but set the e.Tile.PeekTemplateSettings.ShowInterval = 1; in OnTileCreated event. Also made sure to set e.Tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = false;. This may not be the clean way, but works. 

Thanks,
Sanjay.