click events on Anchor inside RadTile List content Tile is not firing

2 posts, 0 answers
  1. Phani
    Phani avatar
    10 posts
    Member since:
    Mar 2015

    Posted 18 May 2015 Link to this post

    Dear Team,

    I'm creating a TileList Dynamically using the below code. The content template tile is having a anchor tag, when  I click  on it the associated method has to be called. Instead of calling the click event associated to anchor tag, the RadTileList onclickclick event is getting fired. Please help on this. Below is the code.

     

      <asp:UpdatePanel ID="UpdatePanelTileList" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <telerik:RadTileList runat="server" AutoPostBack="false" OnClientTileClicking="OnClientTileClicking" ID="ProjectAssetsTileList"
    Width="97%"
    EnableDragAndDrop="true" OnTileDataBound="ProjectAssetsTileList_TileDataBound"
    SelectionMode="Multiple">
    </telerik:RadTileList>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
    function OnClientTileClicking(titleList, args) {
    debugger;
    alert('hi');
    args.set_cancel(true);
    $telerik.cancelRawEvent(args);
    return false;
    }
    function MyFunctionEdit() {
    alert('hi edit');
    return false;
    }
    </script>
    </telerik:RadScriptBlock>

    </ContentTemplate>
    </asp:UpdatePanel>

     Tile creation Code:

    private class ContentTemplate : ITemplate
    {
    private DomainDAL.ProjectAsset asset;

    public ContentTemplate(DomainDAL.ProjectAsset asset)
    {
    this.asset = asset;
    }
    public void InstantiateIn(Control container)
    {
    string tileContent = string.Empty;
    if (asset==null)
    {
    tileContent = @"<div class='card add'>
    <div class='dotted-box'>
    <h1>+</h1>
    </div>
    <div class='menu'>
    <ul class='list-group'>
    <a href='#' class='list-group-item' data-toggle='modal' data-target='#text-edit-lightbox'><span class='icon icon-text'></span>Add Text Frame</a>
    <a href='#' class='list-group-item' data-toggle='modal' data-target='#image-library'><span class='icon icon-media'></span>Browse Media Library</a>
    <a href='#' class='list-group-item' data-toggle='modal' data-target='#upload-library'><span class='icon icon-upload'></span>Upload images or videos</a>
    </ul>
    </div>
    </div>";
    }
    else if (asset.ContentType==Constants.ContentType.Image )
    {
    tileContent = @"<div class='card' onclick='alert(hidiv);'><div class='card-wrapper'>
    <div><img src='" + String.Format("{0}/{1}/{2}", BLOB_ROOT_URL, asset.Container, asset.ImageUrl) + @"' class='thumb-image'/>
    <div class='pull-righ static-icon'>
    <span class='close'><img src='../images/icons/icon-trash.png'/></span>
    </div>
    <div class='backdrop' >
    <a href='javascript:MyFunctionEdit();' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
    <span class='close'><img src='../images/icons/garbage.png'/></span>
    </div>
    </div>
    <div>
    <h4><img src='../images/icons/icon-photo.png' class='icon-margin'/>" + asset.Caption + @"</h4>
    <p>Lorem ipsum dolor sit amet, conset adipiscing elit.</p>
    </div>
    </div>
    </div>";
    }
    else
    {
    tileContent = @"<div class='card'><div class='card-wrapper'>
    <div><div class='text-tile'><h2>" + asset.AssetName + @"</h2><h4>" + asset.Caption + @"</h4></div>
    <div class='pull-righ static-icon'>
    <span class='close'><img src='../images/icons/icon-trash.png'/></span>
    </div>
    <div class='backdrop'>
    <a href='href='javascript:void(0)' onclick='event.preventDefault();alert(hi);' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
    <span class='close'><img src='../images/icons/garbage.png'/></span>
    </div>
    </div>
    <div>
    <h4><img src='../images/icons/icon-photo.png' class='icon-margin'/>" + asset.Caption + @"</h4>
    <p>Lorem ipsum dolor sit amet, conset adipiscing elit.</p>
    </div>
    </div>
    </div>";
    }
    LiteralControl literal = new LiteralControl(tileContent);
    container.Controls.Add(literal);

    }
    }

     

    Bind Data to Tile List 

     protected void BindDataToTileList(List<DomainDAL.ProjectAsset> workingProjectAssets)
    {
    if (ProjectAssetsTileList.Groups.Count>0)
    ProjectAssetsTileList.Groups.RemoveAt(0);
    TileGroup group = new TileGroup();
    foreach (DomainDAL.ProjectAsset asset in workingProjectAssets.Where(x => x.State != (int)Constants.AssetStatus.Deleted))
    {
    RadContentTemplateTile contTile = new RadContentTemplateTile();
    contTile.ContentTemplate = new ContentTemplate(asset);
    contTile.CssClass = "card";
    group.Tiles.Add(contTile);
    }
    RadContentTemplateTile newAssetTile = new RadContentTemplateTile();
    newAssetTile.ContentTemplate = new ContentTemplate(null);
    newAssetTile.CssClass = "card add";
    group.Tiles.Add(newAssetTile);
    ProjectAssetsTileList.Groups.Add(group);

    }

     

     

     

     

     

     

     

     

     

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 19 May 2015 Link to this post

    Hi Phani,

    Could you try handing the onmousedown event of the anchor to call your function and cancel the event? Otherwise, the click event will bubble to the tile and fire the built-in OnTileClicking event. If you do not need that event but only the anchor clicks, you can remove it.

    Also, please make sure to provide valid HTML, as the following anchor is invalid:

    <a href='href='javascript:void(0)' onclick='event.preventDefault();alert(hi);' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>

    You may also find interesting the following KB article: http://www.telerik.com/support/kb/aspnet-ajax/tilelist/details/drag-and-drop-with-contenttemplatetile-input-elements

    Here is a small sample that called the functions attached to the anchors:

    <telerik:RadTileList runat="server" AutoPostBack="false" OnClientTileClicking="OnClientTileClicking" ID="ProjectAssetsTileList"
                         Width="97%"
                         EnableDragAndDrop="true" OnTileDataBound="ProjectAssetsTileList_TileDataBound"
                         SelectionMode="Multiple">
        <Groups>
            <telerik:TileGroup>
                <telerik:RadContentTemplateTile>
                    <ContentTemplate>
                        <a href='javascript:void(0);' onmousedown="$telerik.cancelRawEvent(event);MyFunctionEdit();" class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
                    </ContentTemplate>
                </telerik:RadContentTemplateTile>
                <telerik:RadContentTemplateTile>
                    <ContentTemplate>
                        <a href='javascript:void(0);' onmousedown='$telerik.cancelRawEvent(event);alert("the second anchor click");' class='btn btn-transparent' data-toggle='modal' data-target='#image-editing'>Edit</a>
                    </ContentTemplate>
                </telerik:RadContentTemplateTile>
                 
            </telerik:TileGroup>
        </Groups>
    </telerik:RadTileList>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function OnClientTileClicking(titleList, args) {
                //debugger;
                alert('hi');
                args.set_cancel(true);
                //$telerik.cancelRawEvent(args); //this is not a DOM event so you can cancel it like that, you need to pass the browser event to that method
                return false;
            }
            function MyFunctionEdit() {
                alert('hi edit');
                return false;
            }
        </script>
    </telerik:RadScriptBlock>
     

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top