Articles in this section
Category / Section

How to place Hyperlink in .NET MVC grid column ?

1 min read

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

 
 
 
$("#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>
 

 

The output will be also follows.

 

Conclusion

I hope you enjoyed learning how to place Hyperlink in .NET MVC grid column.

You can refer to ASP.NET MVC Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our  to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied