RadTileList OnTileClick event not firing

[Martin]

Hi

I have the following aspx code:

<telerik:RadScriptManager
        ID="RadScriptManager1"
        runat="server"
        CdnSettings-TelerikCdn="Enabled">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <p>Testataan yläteksti</p>
    <asp:Label ID="Polku1" runat="server" Text="Label"></asp:Label>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="500px"
                          Width="1160px" BackColor="#99CCFF" >
        <telerik:RadTileList ID="ValikkoTileList1" runat="server"
                             Skin="BlackMetroTouch" AutoPostBack="true"
                             OnTileClick="ValikkoTileList1_TileClick">
            <Groups>
                <telerik:TileGroup></telerik:TileGroup>
                <telerik:TileGroup></telerik:TileGroup>
                <telerik:TileGroup></telerik:TileGroup>
            </Groups>

        </telerik:RadTileList>
    </telerik:RadAjaxPanel>
    <asp:Label ID="Message1" runat="server" Text="Label"></asp:Label>
    <div runat="server" id="clickResult">
    </div>
    <p>Testataan alateksti</p>

In my c# code I create Tiles dynamically but I can not get into the event handler :

RadImageAndTextTile tile = new RadImageAndTextTile();
                tile.Name = "ValikkoTile" + counter.ToString();
                //tile.Shape = TileShape.Wide;
                tile.Height = 80;
                tile.Width = 250;
                //tile.Text = row.ValikkoNimi;
                tile.Badge.PredefinedType = TileBadgeType.Playing;
                tile.Title.Text = row.ValikkoNimi;
                tile.ImageUrl = "/Img/comment_32x32.png";
.........
tile.NavigateUrl = redirect;


                tile.PeekTemplate = new MyTemplate(text1, imgurl);
                tile.PeekTemplateSettings.Animation = PeekTemplateAnimation.Slide;
                tile.PeekTemplateSettings.AnimationDuration = 800;

                tile.PeekTemplateSettings.Easing = "easeInOutBack";

                tile.PeekTemplateSettings.ShowInterval = 5000;
                tile.PeekTemplateSettings.CloseDelay = 5000;
                tile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
                tile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
                if (counter <= grouping)
                {
                    ValikkoTileList1.Groups[0].Tiles.Add(tile);
                }

And here comes the event handler that never is being called:

protected void ValikkoTileList1_TileClick(object sender, TileListEventArgs e)
        {
            clickResult.InnerHtml = "Clicked tile name and URL: " + e.Tile.Name + "<br />" + e.Tile.NavigateUrl;

        }

When AutoPostback is set to false the tiles are redirecting according to NavigateUrl.
Thanks
Martin

[Martin]

I solved the problem. The RadTileList can NOT be inside an RadAjaxPanel.
By disabling the RadAjaxPanel the event fires.

Martin

[Shinu]

Hi Martin,

You don't need to remove the RadAjaxPanel. You can include the clickResult div inside the RadAjaxPanel as shown in the following sample code.

ASPX:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" CdnSettings-TelerikCdn="Enabled">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="600px" Width="1160px"
    BackColor="#99CCFF">
    <asp:Label ID="Polku1" runat="server" Text="Label"></asp:Label>
    <telerik:RadTileList ID="ValikkoTileList1" runat="server" Skin="BlackMetroTouch"
        AutoPostBack="true" OnTileClick="ValikkoTileList1_TileClick">
        <Groups>
            <telerik:TileGroup>
            </telerik:TileGroup>
        </Groups>
    </telerik:RadTileList>
    <asp:Label ID="Message1" runat="server" Text=""></asp:Label>
    <div runat="server" id="clickResult">
    </div>
</telerik:RadAjaxPanel>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadImageAndTextTile tile = new RadImageAndTextTile();
    tile.Name = "Tile 1";
    tile.Height = 80;
    tile.Width = 250;
    tile.Badge.PredefinedType = TileBadgeType.Playing;
    tile.ImageUrl = "../Images/Upload.png";
    tile.NavigateUrl = "http://www.google.com";
    ValikkoTileList1.Groups[0].Tiles.Add(tile);

    RadImageAndTextTile tile1 = new RadImageAndTextTile();
    tile1.Name = "Tile 2";
    tile1.Height = 80;
    tile1.Width = 250;
    tile1.Badge.PredefinedType = TileBadgeType.NewMessage;
    tile1.ImageUrl = "../Images/Web.png";
    tile1.NavigateUrl = "http://www.telerik.com";
    ValikkoTileList1.Groups[0].Tiles.Add(tile1);
}

protected void ValikkoTileList1_TileClick(object sender, TileListEventArgs e)
{
    clickResult.InnerHtml = "Clicked Tile Name : " + e.Tile.Name + "<br />" + "Clicked Tile URL : " + e.Tile.NavigateUrl;
}

Also note that the TileClick server side event is triggered when a tile is clicked with the left mouse button (or is tapped on a touch device) and the AutoPostBack property is set to true. Now Navigation will not occur even if a NavigateUrl is provided in the given tile, but a postback will be invoked instead.

Thanks,
Shinu.