This is a migrated thread and some comments may be shown as answers.

RadTileList OnTileClick event not firing

2 Answers 87 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 03 Sep 2013, 06:57 AM
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

2 Answers, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
answered on 03 Sep 2013, 11:19 AM
I solved the problem. The RadTileList can NOT be inside an RadAjaxPanel.
By disabling the RadAjaxPanel the event fires.

Martin
0
Shinu
Top achievements
Rank 1
answered on 03 Sep 2013, 01:23 PM
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.
Tags
TileList
Asked by
Martin
Top achievements
Rank 1
Answers by
Martin
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or