set icon to custom command in IconClass conditionally row field

[Amin]

Hello

i need to change custom command icon depend on row field for instance "Status" i tried this code but it doesn't work

@using EliteInsurer.Areas.Admin.Dto;
@using Kendo.Mvc.UI;
<div class="k-rtl">
    @(
        Html.Kendo().Grid<HostedTaskDto>()
        .Name("grid")
        .Columns(columns =>
        {
                columns.Bound(m => m.Status);
                columns.Command(p =>
                {
                p.Custom("StartTask").Text(" ").Click("changestatus").IconClass("#=getCommandIcon#");

            });

        })
        .ToolBar(tools =>
        {
            tools.Excel();
            tools.Create().Text(" ");
        })
        .Pageable(p => p.PageSizes(true).Input(true))
        .Sortable()
        .Filterable(fr => fr.Mode(GridFilterMode.Row))
        .Resizable(resize => resize.Columns(true))
        .Scrollable()
        .Excel(ex => ex.AllPages(true))
        .Editable(e => e.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
        .Ajax()
        .GroupPaging(true)
        .PageSize(50)
        .Read("GetTasks", "Task")
        .Create("NewTask", "Task")
        .Update("EditTask", "Task")
        .Destroy("DeleteTask", "Task")
        .PageSize(20)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Status).Editable(false);
            
        })

        )
        )
</div>
<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }
    
    function changestatus(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        $.ajax({
            type: "POST",
            url: '@Url.Action("ChangeTaskStatus", "Task")',
            datatype: "json",
            traditional: true,
            data: { Id: dataItem.Id },
            success: function (data) {
                if (data.success == true) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.read();
                    alert(data.message);
                }
            },
            error: function (data) {
                alert(data.message);
                console.log(error);
            }

        });
    }
    function getCommandIcon(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var status = dataItem.Status;
        console.log(status);
        if (status === "1") {
            return "k-icon k-i-stop";
        } else {
            return "k-icon k-i-play";
        }
    }

</script>

[Anton Mironov]

Hello Amin,

Thank you for the code snippets and the details provided.

In order to achieve the desired behavior, I would recommend iterating by all dataItems in the Grid.

Conditionally check the field values and set the needed icon.

Give a try to the approach above and let me know if it achieves the desired result.

Kind Regards,
Anton Mironov
Progress Telerik