How to place Hyperlink in grid column

1 min read

Problem

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.

 
 
 
$("#Grid").ejGrid({
                dataSource: window.gridData,
                columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { headerText: "Manage Records", 
                                template: "<a href=’#’>View</a>" 
                         }                         
                ],
                create: "onGridCreate"
            });

MVC

 
  @(Html.EJ().Grid<OrderTable>("Grid")
       .Datasource((IEnumerable<OrderTable>)ViewBag.data)
        .AllowPaging()      
        .Columns(col =>
                {
 
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true). Add();
                col.Field("CustomerID").HeaderText("Customer ID").Add();
                 col.HeaderText("Manage Records")
                    .Template(" <a href='#''>View</a>").Add();
 
                })
       .ClientSideEvents(evt=>evt.Create("onGridCreate")))

ASPX

 
<ej:Grid id="Grid" runat="server" AllowPaging="true">         
         <Columns>
             <ej:Column Field="OrderID"/>
             <ej:Column Field="CustomerID""/>                             
             <ej:Column HeaderText="Manage Records" Template="<a href='#'>View</a>" />             
         </Columns>
         <ClientSideEvents Create="onGridCreate"/>
     </ej:Grid>

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.

 
<script type="text/javascript">
        function onGridCreate(args) {
 
            this.element.find(".e-gridcontent").on("click","a", function (e) {
                e.preventDefault();
 
                //Do something
 
                
            });
        }
</script>