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

LP13

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>
Steve Greene

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Kendo ui grid popup editor form template - how to hide some fields on edit and not on add

How to cancel edit on Kendo Grid?

Kendo grid's Select command operation configuration

How to know which row is in edit mode without events in Kendo grid

How to edit Kendo Scheduler Popup template

Edit and delete rows in Kendo Grid

Kendo-UI Hybrid UI Grid Edit Template

Kendo UI Grid Row Template Command

How to use client template expressions in ajax binding of a mvc kendo grid?

How to change the default filter operator in kendo ui grid mvc

Unable to Edit kendo grid

How to change the color of Kendo Grid elements

Making a Kendo Grid link template behave like a command

How to custom tooltip such as contains some button in grid's cell tooltip in Kendo UI MVC?

Can I change the tooltip's default action of Kendo UI grid in MVC?

How to save manually updated data in kendo grid inline edit mode

How to add DatePicker in ClientTemplate for Kendo MVC Grid

Kendo UI MVC Grid - DataSource Interfering With Column Template

Kendo edit template array

How do I Change window size on kendo grid editor template?

Kendo grid - How to open popup edit window with JavaScript

Kendo Grid (delete, edit buttons)

Kendo UI Mvc Grid Title template

How to change the background of a cell dynamically in a Kendo MVC UI Grid?

Specifying Javascript in a header template for a column on my Kendo MVC grid just renders the Javascript (Kendo UI MVC)

Kendo grid edit template data bind - no data

How to get a kendo grid on a kendo template

How to change primary command in Edit

Pass more than 1 parameter in Kendo Grid Client Template MVC