Icon only Update/Cancel commands for inline editing

[Matt]

Hi,

I am using .net core tag helpers to display a grid with inline editing.

I am able to display Icon only commands for Edit and Delete. But I am struggling to find any documentation to customize the same behaviour for Update/Cancel

 

<kendo-grid name="grid" height="550" resizable="true">
    <datasource page-size="100" type="DataSourceTagHelperType.Ajax" server-operation="true" name="dataSource" batch="true">
        <transport>
            <read url="/Test/read" type="post"  />
            <update url="/Test/create"  />
            <destroy url="/Test/delete"  />
            <create url="/Test/create"  />
        </transport>
        <schema>
            <model id="Id">
                <fields>
                    <field name="FirstName">
                        <validation required="true" />
                    </field>
                    <field name="LastName"></field>
                    <field name="Email"></field>
                </fields>
            </model>
        </schema>
    </datasource>
    <sortable enabled="true" />
    <filterable enabled="true" extra="false">
        <operators>
            <string eq="Is equal to" contains="Contains" startswith="Starts with" neq="Is not equal to" />
        </operators>
    </filterable>
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 10,20 }" />
    <editable mode="inline" />
    <columns>
        <column width="75">
            <commands>
                <column-command name="edit" template="#=edittemplate(data)#">
                </column-command>
                <column-command name="destroy" template="#=deletetemplate(data)#"></column-command>
            </commands>
        </column>
        <column field="FirstName" title="FirstName" width="50"></column>
        <column field="LastName" title="LastName" width="50"></column>
        <column field="Email" title="Email" width="75"></column>
    </columns>
</kendo-grid>

edittemplate = function (data) {
    var template = '<button type="button" class="k-button k-button-icon"><span class="k-icon k-i-update"></span></button>';
    return template;
};

[Nikolay]

Hello Matt,

Thank you for sharing the Grid declaration.

I would suggest using the following templates for the Edit and Delete buttons:

        <column width="10">
            <commands>
                <column-command name="edit" template="#=edittemplate(data)#">
                </column-command>
                <column-command name="destroy" template="#=deletetemplate(data)#"></column-command>
            </commands>
        </column>
       ...
<script>
    function edittemplate(data) {
        var template = '<a role="button" class="k-button k-button-icontext k-grid-edit" href="#""><span class="k-icon k-i-edit"></span></a>';
        return template;
    };

    function deletetemplate(data) {
        var template = '<a role="button" class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-i-close"></span></a>'
        return template;
    }
</script>

Which will result in the following rendered button:

For your convenience, I am attaching a small MVC Core project demonstrating the above.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Luke]

Hello Nikolay,

I am implementing your solution to add the k-state-disabled class to the buttons based on a boolean value in the model.

However, I can't seem to figure out how to access the dataItem in the command template (edittemplate or deletetemplate).

I have tried the syntax of Aleksandar's post here : https://www.telerik.com/forums/dynamic-text-on-custom-command-button

How do I get the dataItem in the command template?

@(
    Html.Kendo().Grid<DocumentVM>()
        .Name("Documents")
        .ToolBar(tools => tools.Create())
        .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 #");
                command.Destroy().Template("#= DeleteTemplate #");
            });
        })
        .NoRecords()
        .Pageable()
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn)
            .ShowIndexes(true)
        )
        .Filterable(filters => filters
            .Operators(options =>
            {
                options.ForString(strFilters => strFilters.Clear().Contains("Contains"));
            })
            .Extra(false)
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Model(model =>
            {
                model.Id(f => f.Id);
                model.Field(f => f.Title);
                model.Field(f => f.CaseId).DefaultValue(Model);
                model.Field(f => f.DocumentTypesId).DefaultValue(0);
                model.Field(f => f.Editable).DefaultValue(true);
            })
            .Sort(doc => { doc.Add(file => file.Title); })
            .Create(create => create.Action("Create", "Documents").Data("additionalFileInfo"))
            .Read(read => read.Action("Read", "Documents", new { caseId = Model }))
            .Update(update => update.Action("Edit", "Documents", new { caseId = Model }).Data("additionalFileInfo"))
            .Destroy(destroy => destroy.Action("Delete", "Documents"))
            .Events(events => { events.RequestEnd("clearLastUploadedFileName"); events.Error("ErrorHandler"); })
        )
        .Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("FileUpload"))
        .Events(events => { events.Edit("onDocumentEdit"); events.BeforeEdit("beforeDocumentEdit"); events.Remove("onRemoveDocument"); events.DataBound("GridDataBound"); })

)

function EditableTemplate(element) {
    var rowElement = $(element).closest('tr');
    var gridElement = $(element).closest('[data-role="grid"]');
    var grid = $(gridElement).getKendoGrid();
    var dataItem = grid.dataItem(rowElement);
    if (dataItem.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(element) {
    var currentUser = $("#CurrentUser").val();
    var rowElement = $(element).closest('tr');
    var gridElement = $(element).closest('[data-role="grid"]');
    var grid = $(gridElement).getKendoGrid();
    var dataItem = grid.dataItem(rowElement);

    if (dataItem.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>"
    }
}

[Stoyan]

Hello Luke,

I am going to answer this question in place of Nikolay who is currently a subject matter expert for Kendo UI for jQuery.

The template of the command button is evaluated when the Grid first initializes and hasn't been fully loaded yet. For this reason the dataItem of the row is inaccessible in the template.

However as an alternative, I'd recommend you to subscribe to the DataBound Event of the Component and iterate its available items. Then you can get the row that is populated by the item and add the needed changes to the command button:

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

        function onDataBound(e){
            var data = e.sender.dataSource.view();
            data.forEach(dataItem=>
            {
                if(!dataItem.Enabled){
                    $("[data-uid='"+dataItem.uid+"']").find(".k-grid-delete").css("background-color","coral").addClass("k-state-disabled");
                }
                
            })
        }

For your convenience I have applied the implementation of the snippet to this Telerik REPL.

I hope the provided workaround fits the scenario on your side.