How to change Kendo MVC grid's edit command template? - kendo-ui

Question

I am using Kendo UI for ASP.NET MVC. I have grid with edit command. The default look of the edit command is "button" and i wanted to change it to link. But there is no Template() method for command. So how do i change the edit command button to link?
Telerik has option to create own custom command as defined here. but my grid is configured to use GridEditMode.Popup which works great with inbuilt edit command. If i create custom command then i guess i have to wireup popup window & everything else.
I just wanted to change "button" to link?
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Command(command => command.Edit().Text("Edit Me")); // How do i change this to link??
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
)
UPDATE1
#Steve Greene Thanks. Your approach did work on master grid. But i also have child detail grid which has edit link. The approach didnt work for detail grid. Kendo throws error.
I think we have to escaped template expression, to be evaluated in the child/detail context. But i am not sure the whats the syntax
#(Html.Kendo().Grid<UI.Models.GridVM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Master</a>");
//Worked in master grid
})
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CampaignEdit")
.Window(w =>
{
w.Width(400);
w.Title("Edit Details");
}))
.Filterable()
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(20)
.Model(model => model.Id(p => p.CampaignID))
.Read(read => read.Action("GetCampaigns", "Home"))
.Update(update => update.Action("UpdateCampaign", "Home"))
)
.ClientDetailTemplateId("detailtemplate")
)
<script id="detailtemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<UI.Models.DetailGridVM>()
.Name("detailgrid_#=CampaignID#")
.Columns(columns =>
{
columns.Bound(o => o.CampaignDetailID);
columns.Bound(o => o.Notes);
columns.Bound(o => o.CreatedBy);
columns.Template(#<text></text>)
.ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit Detail</a>");
// Does not work in detail grid
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetCampaignDetails", "Home", new { campaignID = "#=CampaignID#" }))
.Update(update => update.Action("UpdateCampaignDetails", "Home"))
.Model(model => model.Id(m => m.CampaignDetailID))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</script>

Answer 1

Use a column template that has the k-grid-edit class on it (use k-grid-delete for destroy):
.Columns(columns =>
{
columns.Bound(p => p.CampaignID)
columns.Bound(p => p.CampaignStatus);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-edit"" href=""\#"">Edit</a>").Width(30);
columns.Template(#<text></text>).ClientTemplate(#"<a class=""k-grid-delete"" href=""\#"">Delete</a>").Width(30);
})
or for smaller buttons and bootstrap:
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-info btn-xs k-grid-edit"" href=""\#"">Edit</a>").Width(30);
column.Template(#<text></text>).ClientTemplate(#"<a class=""btn btn-danger btn-xs k-grid-delete"" href=""\#"">Delete</a>").Width(30);

Answer 2

For example you can do that with css only:
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit :hover {
cursor: pointer;
}
td[role=gridcell] > a.k-button.k-button-icontext.k-grid-edit {
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: transparent;
border: none;
}