Tuesday, 18 February 2014

How to open a new tab On click of a hyper-linked column in Telerik Razor Grid

Today i got a requirement to open a external URL in a tab when the linked column is clicked.
This  can be achieved by simply adding the client template/ template to the linked column.

1) Using Template Attribute in the Telerik Grid
column.Bound(a => a.Website)
      .Template(@<text><a href="@Url.Content(item.Website)" target="_blank">@item.Website</a></text>)
      .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

2) Using Client Template Attribute in the Telerik Grid


column.Bound(a => a.Website)
    .ClientTemplate("<a href='<#= Website #>' target='_blank'><#= Website #></a>")
    .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

Output:


But the really annoying is that when you click the link it is throwing error  as
 "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable"



This is because the IIS is unable to resolve the path.

Solution to the above issue:

The above issue can be fixed by a simple trick, just you need to append the http:// to the website in the client template or in the template attribute. See the code below:

column.Bound(a => a.Website)
      .Template(@<text><a href="@Url.Content("http://"+item.Website)" target="_blank">@item.Website</a></text>)
      .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

Note: Similarly if it is a mail ID column then, use mailto: as the prefix.

Thats it, Enjoy!