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

[Phani]

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);

}

 

 

 

 

 

 

 

 

 

 

 

​

​

[Marin Bratanov]

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