How to place Hyperlink in in .NET WebForms 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.
I hope you enjoyed learning about how to place Hyperlink in in .NET WebForms grid column.
You can refer to our .NET WebForms 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 example 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!
exactly santhosh ...that is what I also want
if you found any solution please let me know
thanks !!
I have this --
<ej:Column Field="OrganizationId" HeaderText="Organization"/>
<ej:Column Field="UserName" HeaderText="User"/>
<ej:Column Field="FirstName" HeaderText="First Name"/>
<ej:Column Field="LastName" HeaderText="Last Name"/>
<ej:Column Field="Role" HeaderText="Groups" Template="<a href='/About.aspx'>{{Role}}</a>"/>
</Columns>
I want the role to load instead of the word "View" - when I do {{Role}}, my grid doesnt load any data at all