How to pass row data item to command template handler?

[Luke]

I am trying to disable my edit and delete commands conditionally. I have found a couple of resources on these forums but none of them work in me scenario. I attempted to use the .Visible() function of the command cell; however, this approach is throwing an error in the browser console. So, I went a different direction and used the .Template() for my command. This is also not working because I am not getting the data item for the row in my template handler. Here is where I am at.

@(Html.Kendo().Grid<DocumentVM>()
        .Name("Documents")
        .Columns(columns =>
        {
            columns.Bound(f => f.Title)
                .ClientTemplate("<a href='" +
                    Url.Action("DisplayFile", "Documents") + "/#=Id#' target='_blank'><i class='k-icon #:FileIcon#'></i> #=Title#</a>"
                );
            columns.ForeignKey(f => f.DocumentTypesId, (System.Collections.IEnumerable)ViewData["DocTypes"], "Id", "Description");
            columns.Bound(f => f.CreatedDate).Title("Date Uploaded");
            columns.Bound(f => f.CreatedBy).Title("Uploaded By");
            columns.Command(command => {
                command.Edit().Template("#= EditableTemplate(data) #");
                command.Destroy().Template("#= DeleteTemplate(data) #");
            });
...
)

function EditableTemplate(data) {
    if (data.Editable) {
        return "<a role='button' class='k-button k-button-icontext k-grid-edit' href='#'><span class='k-icon k-i-edit'></span>Edit</a>"
    }
    else {
        return "<a role='button' class='k-button k-button-icontext k-grid-edit k-state-disabled' href='#'><span style='color: green;' class='k-icon k-i-check'></span>Edit</a>"
    }
}

function DeleteTemplate(data) {
    var currentUser = $("#CurrentUser").val();
    var userIsAdmin = $("#UserIsAdmin").val();

    if (data.Editable === true && currentUser === data.CreatedBy) {
        return "<a role='button' class='k-button k-button-icontext k-grid-delete' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
    else {
        return "<a role='button' class='k-button k-button-icontext k-grid-delete k-state-disabled' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
}

How can I access the row data item in my template handlers for commands?

[Luke]

For full disclosure, I have also attempted to retrieve the data item via Javascript in my handler methods but I can't seem to find a solution to identify which row is triggering the method.

[Stoyan]

Hello Luke,

There a couple of ways you can hide the command column or some of its buttons based on the user's authority depending on how you store and access the information of the user:

1. If you send a ViewData variable from the server, you can put the Grid's command column in a conditional statement

   @{
       var user = ViewData["user"] as UserModel;
   }
   
           @(Html.Kendo().Grid<Core_Grid_CRUD.Models.OrderViewModel>()
               .Name("grid")
               .Columns(columns =>
               {
                   ...
                   if (user.Admin)
                   {
                       columns.Command(command =>
                       {
                           command.Edit().IconClass("k-icon k-i-table-cell-properties");
                           command.Destroy();
                       });
                   }
               })
           )

2. Alternatively, if you store the user's information in a cookie, you can access it in the Grid's DataBound Event and hide the specific command by targeting it with jQuery or utilizing the Component's hideColumn method to hide the entire command column 

   .Events(e=>e.DataBound("onDataBound"))

function onDataBound(e){
     $(".k-grid-edit").hide();
     $(".k-grid-delete").hide();
}

Please give the suggestions above a try and let me know of the results. Thank you.

Regards,
Stoyan
Progress Telerik

[Luke]

Hey Stoyan,

I am trying to disable the command buttons not hide them. Also, I am trying to check a boolean value in my row dataItem that tells me if the row is Editable or not.

[Luke]

This is my current implementation:

command.Edit().Template("#= Editable ? \"<a role='button' class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-i-edit'></span>Edit</a>\" : \"<a role='button' class='k-button k-button-icontext k-grid-edit k-state-disabled' href='\\#'><span style='color: green;' class='k-icon k-i-check'></span>Edit</a>\" #");

I was getting invalid template errors at first, but I had to wrap the anchor tags in escaped quotes to resolve that issue. Now I am getting "Editable is not defined"

[Stoyan]

Hi Luke,

I am sorry, I misunderstood the requirement at hand.

To disable a button defined in a template you need to set its disabled property:

function DeleteTemplate(data) {
    var currentUser = $("#CurrentUser").val();
    var userIsAdmin = $("#UserIsAdmin").val();

    if (data.Editable === true && currentUser === data.CreatedBy) {
        return "<a role='button' class='k-button k-button-icontext k-grid-delete' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
    else {
        return "<a role='button' disabled='disabled' class='k-button k-button-icontext k-grid-delete k-state-disabled' href='#'><span class='k-icon k-i-close'></span>Delete</a>"
    }
}

Then later on you can select the button and remove its disabled attribute:

$(".k-grid-delete").removeAttr("disabled");

Alternatively, if you use the ViewData or Model variables of the Page you can use the HtmlAttributes configuration of the command buttons:

 if (user.Admin)
                {
                    columns.Command(command =>
                    {
                        command.Edit();
                        command.Destroy();
                    });
                }
                else
                {
                    columns.Command(command =>
                    {
                        command.Edit().HtmlAttributes(new { disabled="disabled" });
                        command.Destroy().HtmlAttributes(new { disabled = "disabled" });
                    });
                }

I hope these suggestions now fit the requirement at hand.