[Solved] Grid show/hide customized command according to value of a field

[Rick]

I am trying to show the EditDetail button only if Submit Date is NULL. But editButton.hide() is not working. Below is my code. I wonder what is wrong or what other way can meet my need. Any help would be highly appreciated. Thanks,

@(Html.Kendo().Grid(Model)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Command(command => command.Custom("EditDetails").Text("Edit Details").Click("EditDetails"));
                    columns.Bound(p => p.CompanyName);
                    columns.Bound(p => p.Qrt).Title("Quarter").Format("{0:d}");
                    columns.Bound(p => p.SubmitDate).Format("{0:d}");//.Width(375);
                    columns.Bound(p => p.CreateBy).Title("Created By");
                    columns.Bound(p => p.CreateDate).Format("{0:d}").Title("Imported By");
                    columns.Bound(p => p.ReportID).Hidden();

                })

                .Events(e=>e.DataBound("onDataBound"))
                .Pageable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model1 =>
                        {
                            model1.Id(p1 => p1.ReportID);
                       })
                    .ServerOperation(false)
                    .Read(read => read.Action("UnitRptGrid_Read", "Report"))
                    .PageSize(50)
                )
)

<script type="text/javascript">
    function EditDetails(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        window.location.href = "/Reports/Edit/" + dataItem.id; 
    }

    function onDataBound(e) {
        var grid = $("#grid").data("kendoGrid");
        var view = grid.dataSource.view();

        $.each(view, function (i, row) {
            var chk = row.SubmitDate;
            if (null == chk)
            { 
                //var editButton = row.find(".k-grid-edit");
                var b = $('tr[data-uid="' + row.uid + '"] td:nth-child(1)')
                var editButton = $b.find("k-button k-button-icontext k-grid-EditDetails")
                editButton.hide();
               
            }
        })
    }
</script>     

[Rosen]

Hi Rick,

It seems that there are few issue with the code you have pasted.

- the variable $b is not declared - it should be just b
- the selector for selecting the button is not correct - the class names should be prefixed with a dot.

Here is a modified version of the dataBound function:

function onDataBound(e) {
    var grid = $("#grid").data("kendoGrid");
    var view = grid.dataSource.view();

    $.each(view, function (i, row) {
        var chk = row.Bool;
        if (null == chk)
        {
            var b = $('tr[data-uid="' + row.uid + '"] td:nth-child(1)');
            var editButton = b.find(".k-button.k-button-icontext.k-grid-EditDetails");
            editButton.hide();
        }
    })
}

Regards,
Rosen
Telerik