RadTileList OnTileClick event not firing

3 posts, 0 answers
  1. Martin
    Martin avatar
    3 posts
    Member since:
    Aug 2013

    Posted 03 Sep 2013 Link to this post

    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. Martin
    Martin avatar
    3 posts
    Member since:
    Aug 2013

    Posted 03 Sep 2013 Link to this post

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

    Martin
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Sep 2013 Link to this post

    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.
Back to Top