We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to place Hyperlink in grid column

Platform: ASP.NET MVC |
Control: Grid


How to place Hyperlink in grid column


We can place Hyperlink or any other controls inside grid cells using the Column template feature of the grid. The template to a particular column can be provided by using Template and TemplateID properties of the column.

Using template string

The template string will be provided during grid initialization as follows.








Perform action on clicking hyperlink

It is our sole responsibility to perform any action on clicking the link in the particular cell. For that we have to bind event to the hyperlink. But the hyperlink will be visible once the grid is render and so binding the event on DOM load is not sufficient. We can achieve this requirement using the Create event of the grid as follows.


The output will be also follows.


2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment
Aniruddha Pondhe
Oct 21, 2016
How can I do the same in Angular2? I tried applying template to ej-column but it doesn't work. 
Angular is unable to parse the template.
Nate Pirtz
May 06, 2018

how do I add a hyperlink to the column with the text of the link a property of my model?  Why would we just put in "View"??

Sathyanarayanamoorthy Eswararao [Syncfusion]
May 07, 2018

Hi Nate,


According to your query we suspect that you need to set the values of the property of Model for the Hyperlink column. We suggest you to use the JSRender templates to achieve this requirement. Please refer the below code example.



            dataSource: window.gridData,

            columns: [

                     { field: "OrderID", headerText: "Order ID" },

                     { field: "CustomerID", headerText: "Customer ID" },


                         headerText: "Manage Records",

                         template: "<a rel='nofollow' href=&#8217;#’>{{:CustomerID}}</a>"



            create: "onGridCreate"




In the above code example the CustomerID values are displayed as Hyperlink. We have prepared a simple JS Playground sample which can be referred form below location.


Sample: https://jsplayground.syncfusion.com/5cnwpsaa




Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile