Adding a column which contains a hyperlink for every row in KendoUI grid control in ASP.NET MVC - asp.net-mvc-4

Question

Here is my View that contains the KendoUI Grid Control:
I want to add a new column that contains a hyperlink before the Date of creation column .
#using Kendo.Mvc.UI
#model IEnumerable<ExamplekendoDropdown.Models.FacilityGroup>
#{
ViewBag.Title = "Grid";
}
<table width="700">
<tr>
<td align="center">
<table width="1000">
<tr>
<td align="left">
#using (Html.BeginForm("Grid", "Grid", FormMethod.Get))
{
<table>
<tr>
<td>
<span>Facility Group Name</span>
</td>
<td>
#(Html.Kendo().AutoComplete()
.Name("FacilityGroupName")
.Value("")
.Enable(true)
)
#Html.Hidden("FacilityGroupName")
</td>
</tr>
<tr>
<td>
<input id="Submit1" type="submit" value="Search" />
</td>
</tr>
</table>
}
</td>
</tr>
<tr>
<td align="center" >
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.FacilityGroupId);
//columns.Bound(#Html.ActionLink("Create Facility", "Facility"));
columns.Bound(p =>p.FaclityGroupName);
columns.Bound(p => p.status).Width(80);
columns.Bound(p => p.CreationDate);
columns.Command(command => { command.Edit(); });
})
//.ToolBar(toolbar =>toolbar.Create())
//.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditUserPopupTemplate")
.Window(w => w.Title("Facility").Name("editWindow").Width(300).Height(300)))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(datasource => datasource
.Server()
.Model(model => model.Id(p => p.FacilityGroupId ))
.Read("Grid", "Grid")
.Update("Update", "Grid")
//.Create("Create","Grid")
//.Destroy("Destroy","Grid")
)
)
<script type="text/javascript">
$(document).ready(function () {
$("form.k-edit-form").kendoValidator();
});
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
Now i need to add another column before the "Date Of Creation" Column that contains a hyperlink.
Please share your inputs
Thanks

Answer 1

But why not this if you are using ajax
Ajax().ClientTemplate("#=FileName#");
if server()
columns.Bound(p => p.ProductID).Template(#<text>
#Html.ActionLink("Show Product Details", "ProductDetails", new { id = #item.ProductID } )>
</text>);
This example

Answer 2

columns.Template(#<text></text>).ClientTemplate(
#Html.ActionLink("Send Reset Email", "Login", new { loginButton = "reset",activate=true,fromAdmin=true,rowField="#=rowField#" }).ToHtmlString()
);
This worked for me.

Answer 3

You can use Template and ClientTemplate, to get a column with a hyperlink.
columns.Bound(p => p.CreationDate)
.Template(#<text>#item.CreationDate</text>)
.ClientTemplate("<a href=''>#CreationDate<a/>").Title("Link");
columns.Bound(p => p.CreationDate);

Answer 4

You only need to use the Template method for Server Binding. (ClientTemplate is for Ajax binding). You do not need to bind it to specific property unless you want to associate the column header to filter/sort/group by that property.
columns.Template(#<text>#Html.ActionLink("Create Facility", "Facility")</text>)

Answer 5

columns.Template(#<text></text>)
.ClientTemplate("<a href='" + Url.Action("Index", "Home") + "'>Create Facility</a>")
.HtmlAttributes(new { style = "text-align: left;" })
.Width(60);
This worked for me

Answer 6

If your grid has Server Binding use this:
columns.Bound(x => x.ProjectCode)
.Template(items => Html.ActionLink(items.ProjectCode, "Manage", "Project", new {projectId = items.ProjectId}, null));