How to place Hyperlink in .NET MVC 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
$("#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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
