CODEWITHSUNDEEP
kendo-uiasp.net-mvc-5kendo-grid
Hemal
Hemal

Reputation: 3760

Kendo Grid Multiple Hyperlinks in single column

I am using following code to display data from server in a Kendo Grid.

Working fine.

I want to put two hyperlinks in last cell of each row, but can do with only one.

I want EDIT and DELETE link in same cell.

How can I achieve this?

CODE

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(u => u.USERNAME);
    columns.Bound(u => u.PASSWORD);
    columns.Bound(u => u.ROLE);
    columns.Bound(u => u.STATUS);
    columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));

}
)
.Pageable()

)

Upvotes: 0

Views: 1246

Answers (1)

David Shorthose
David Shorthose

Reputation: 4497

There are a couple of ways to do this.

First you could use the inbuilt edit/delete options from within the grid config

like so: 

 columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();                         
                });

Then just wire up the edit config and destroy delete commands appropriately.

Alternatively you can template these out using one of two methods:

First inline template: 

columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a> 
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")

So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this: 

columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")

then create your template like so: 

<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='@Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a> 
<a class="btn btn-danger" href='@Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a> 
<div> 

</script>

then the getButtonTemplate function: 

function getButtonTemplate(data, templateName) {
    var templateObj = $("#" + templateName).html();
    var template = kendo.template(templateObj);
    return template(data); 
}

So let me explain what is going on here with this second method.

Instead of templating the html in the column we extract it out into two components for want of a better word.

We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.

The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.

I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.

If you need any more info let me know and I will update the answer for you.

Upvotes: 2

Related Questions