I have the below Tile with databanding. When first time the page loads tile click works fine. But when the postback event triggers due to radio button selection change and the tiles load, first click to any tile does nothing. Again 2nd click it's works fine. Here is the code. Not sure what missing? Thanks for helping in a advance.
aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<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="font-size:small;" >
<h3 style="text-align:center;font-family:'Times New Roman';"><%#DataBinder.Eval(Container.DataItem, "MEMBER_CAPTION")%></h3>
<strong>Clicks:</strong>
<%#DataBinder.Eval(Container.DataItem, "Clicks")%>
</div>
</TilePeekTemplate>
</DataBindings>
</telerik:RadTileList>
<asp:RadioButtonList id="rdSort" runat="server" AutoPostBack="true" CellPadding="10" CellSpacing="20" RepeatDirection="Horizontal"
OnSelectedIndexChanged="rdSort_SelectedIndexChanged">
<asp:ListItem Text="Clicks" Value="Clicks" selected="true" />
<asp:ListItem Text="Impressions" Value="Impressions" />
<asp:ListItem Text="CTR" Value="Click Thru Rate" />
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindMainContaint();
}
}
private void BindMainContaint()
{
RadTileList1.DataSource = dataTableForTile;
RadTileList1.TileRows = 4;
RadTileList1.DataBind();
}
protected void RadTileList1_OnTileDataBound(object sender, TileListEventArgs e)
{
//test the tile type first so its specific properties can be used
RadImageAndTextTile tile = e.Tile as RadImageAndTextTile;
//ImageAndTextTileBinding t = e.Tile as ImageAndTextTileBinding;
if (!object.Equals(tile, null))
{
e.Tile.PeekContentContainer.BackImageUrl = ((System.Data.DataRowView)(e.Tile.DataItem)).Row["Colorbar"].ToString();
tile.ImageUrl = ((System.Data.DataRowView)(e.Tile.DataItem)).Row["Colorbar"].ToString();// DataBinder.GetPropertyValue(e.Tile.DataItem, "Colorbar", null);
e.Tile.PeekContentContainer.Visible = true;
}
}
protected void RadTileList1_OnTileCreated(object sender, TileListEventArgs e)
{
//work with common settings for all tiles
e.Tile.PeekTemplateSettings.ShowInterval = 10;
//e.Tile.PeekTemplate.InstantiateIn = true;
e.Tile.PeekTemplateSettings.CloseDelay = 0;
e.Tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
e.Tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = false;
e.Tile.PeekTemplateSettings.AnimationDuration = 10;
//using properties specific for a given tile type - check the tile type first
RadImageAndTextTile tile = e.Tile as RadImageAndTextTile;
//e.Tile.PeekContentContainer.BackColor = System.Drawing.Color.Violet;
if (!object.Equals(tile, null))
{
tile.ImageWidth = System.Web.UI.WebControls.Unit.Percentage(100);
// tile.BackColor = System.Drawing.Color.Violet;
tile.ImageUrl = "~/Images/green-bar.png";
tile.Shape = TileShape.Wide;
}
}
protected void RadTileList1_TileClick(object sender, TileListEventArgs e)
{
Response.Redirect("~/DrillDownPage.aspx");
}
protected void rdSort_SelectedIndexChanged(object sender, EventArgs e)
{
BindMainContaint();
}
aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<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="font-size:small;" >
<h3 style="text-align:center;font-family:'Times New Roman';"><%#DataBinder.Eval(Container.DataItem, "MEMBER_CAPTION")%></h3>
<strong>Clicks:</strong>
<%#DataBinder.Eval(Container.DataItem, "Clicks")%>
</div>
</TilePeekTemplate>
</DataBindings>
</telerik:RadTileList>
<asp:RadioButtonList id="rdSort" runat="server" AutoPostBack="true" CellPadding="10" CellSpacing="20" RepeatDirection="Horizontal"
OnSelectedIndexChanged="rdSort_SelectedIndexChanged">
<asp:ListItem Text="Clicks" Value="Clicks" selected="true" />
<asp:ListItem Text="Impressions" Value="Impressions" />
<asp:ListItem Text="CTR" Value="Click Thru Rate" />
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindMainContaint();
}
}
private void BindMainContaint()
{
RadTileList1.DataSource = dataTableForTile;
RadTileList1.TileRows = 4;
RadTileList1.DataBind();
}
protected void RadTileList1_OnTileDataBound(object sender, TileListEventArgs e)
{
//test the tile type first so its specific properties can be used
RadImageAndTextTile tile = e.Tile as RadImageAndTextTile;
//ImageAndTextTileBinding t = e.Tile as ImageAndTextTileBinding;
if (!object.Equals(tile, null))
{
e.Tile.PeekContentContainer.BackImageUrl = ((System.Data.DataRowView)(e.Tile.DataItem)).Row["Colorbar"].ToString();
tile.ImageUrl = ((System.Data.DataRowView)(e.Tile.DataItem)).Row["Colorbar"].ToString();// DataBinder.GetPropertyValue(e.Tile.DataItem, "Colorbar", null);
e.Tile.PeekContentContainer.Visible = true;
}
}
protected void RadTileList1_OnTileCreated(object sender, TileListEventArgs e)
{
//work with common settings for all tiles
e.Tile.PeekTemplateSettings.ShowInterval = 10;
//e.Tile.PeekTemplate.InstantiateIn = true;
e.Tile.PeekTemplateSettings.CloseDelay = 0;
e.Tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
e.Tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = false;
e.Tile.PeekTemplateSettings.AnimationDuration = 10;
//using properties specific for a given tile type - check the tile type first
RadImageAndTextTile tile = e.Tile as RadImageAndTextTile;
//e.Tile.PeekContentContainer.BackColor = System.Drawing.Color.Violet;
if (!object.Equals(tile, null))
{
tile.ImageWidth = System.Web.UI.WebControls.Unit.Percentage(100);
// tile.BackColor = System.Drawing.Color.Violet;
tile.ImageUrl = "~/Images/green-bar.png";
tile.Shape = TileShape.Wide;
}
}
protected void RadTileList1_TileClick(object sender, TileListEventArgs e)
{
Response.Redirect("~/DrillDownPage.aspx");
}
protected void rdSort_SelectedIndexChanged(object sender, EventArgs e)
{
BindMainContaint();
}