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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to place Hyperlink in grid column

Problem

How to place Hyperlink in grid column

Solution

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.

JS

 

MVC

 

 

ASPX

 

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.

 

Article ID: Published Date: Last Revised Date: Platform: Control:
3767 02/09/2015 02/09/2015 ASP.NET MVC Grid
Did you find this information helpful?
Comments
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.
Reply
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"??

Reply
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.

 

      $("#Grid").ejGrid({

            dataSource: window.gridData,

            columns: [

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

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

                     {

                         headerText: "Manage Records",

                         template: ">{{: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

 

Regards,

Sathyanarayanamoorthy

Add Comment
You must log in to leave a comment

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