Как изменить шаблон команды редактирования сетки Kendo MVC?

Question

Я использую пользовательский интерфейс Kendo для ASP.NET MVC. У меня есть сетка с командой редактирования. Внешний вид команды редактирования - «кнопка», и я хотел изменить его на ссылку. Но для команды нет шаблона(). Итак, как мне изменить кнопку команды редактирования для ссылки?

У Telerik есть возможность создать собственную команду, как определено here. но моя сетка настроена на использование GridEditMode.Popup, которая отлично работает с встроенной командой редактирования. Если я создаю пользовательскую команду, то я думаю, что мне нужно подключить всплывающее окно & все остальное.

Я просто хотел изменить «кнопку» для ссылки?

@(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 Спасибо. Ваш подход действительно работал на главной сетке. Но у меня также есть детальная сетка с сеткой редактирования. Этот подход не работал для подробной сетки. Кендо выдает ошибку.
Я думаю, что нам нужно избегать выражения шаблона, которое должно быть оценено в контексте child/detail. Но я не уверен, что, Что синтаксис

@(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

использовать шаблон столбец, который имеет класс к-сеточного редактировать на нем (использование K-сетки удаления для уничтожения):

.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); 
    }) 

или для небольших кнопок и начальной загрузки:

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

Например, вы можете сделать это с css только:

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; 
}