Hide Edit button in a group

[Derek]

Hi

I used this code to hide Edit and Delete button if a column in the grid has value of 1

function onDataBoundgridCreditors(e) {

    var grid = $("#gridCreditors").data("kendoGrid");
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
        var currentUid = gridData[i].uid;
        if (gridData[i].CREDITOR_SOURCE_ID == 1) {
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            var editButton = $(currenRow).find(".k-grid-edit");
            editButton.hide();
            var deleteButton = $(currenRow).find(".k-grid-delete");
            deleteButton.hide();
        }
    }
}

I added a group and now gridData[i].CREDITOR_SOURCE_ID  from the function above is not recognize.

What should I use to hide the buttons in the group?

Here is the grid:

@(Html.Kendo().Grid<ShowCreditCheck>()
    .Name("gridCreditors")
.Columns(columns =>
{
    columns.Bound(c => c.CREDITOR_ID).Hidden(true);
    columns.Bound(c => c.ASSIGNMENT_ID).Hidden(true);
    columns.Bound(c => c.ACCOUNT_REFERENCE).Title("Ref#").Width(70).HtmlAttributes(new { title = " #= ACCOUNT_REFERENCE # " });
    columns.Bound(c => c.CREDITOR_TYPE).Title("Type").Width(90);
    columns.Bound(c => c.creditorClass).Title("Class").Width(70);
    columns.Bound(c => c.CREDITOR_NAME).Title("Creditor").Width(110);
    columns.Bound(c => c.CREDITOR_SOURCE).Title("Source").Width(80);
    columns.Bound(c => c.applicantNumber).Title("Applicant").Width(60);
    columns.Bound(c => c.CREDIT_CHECK_CURRENT_BALANCE).Title("Balance").Width(60).Format("{0:#,##}").HtmlAttributes(new { style = "text-align:right" })
                        .ClientFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>")
                        .ClientGroupFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>");
    columns.Bound(c => c.DATE_CREATED).Title("Checked").Width(75).Format("{0:dd/MM/yyyy}");
    columns.Bound(c => c.CREDITOR_SOURCE_ID).Hidden(true);
    columns.Bound(c => c.OWNER_ID).Hidden(true);
    columns.Bound(c => c.CREDIT_STATUS_ID).Hidden(true);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(70);
})
.ToolBar(toolbar => toolbar.Create().Text("Add Creditor"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProvidedCreditCheckTemplate"))
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:420px;" })
.Events(e => e.DataBound("onDataBoundgridCreditors"))
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Group(group => group.Add(p => p.creditorClass))
    .ServerOperation(false)
    .Aggregates(aggregates =>
    {
        aggregates.Add(p => p.CREDIT_CHECK_CURRENT_BALANCE).Sum();
    })
    .Events(events => events.Error("error_handlerCreditorProvided"))
    .Model(model => model.Id(p => p.CREDITOR_ID))
    .Create(update => update.Action("GridCreditCheck_Create", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
    .Read(read => read.Action("GridCreditCheck_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
    .Update(update => update.Action("GridCreditCheck_Update", "Home"))
    .Destroy(update => update.Action("GridCreditCheck_Destroy", "Home"))
)

)

[Dimiter Madjarov]

Hello Derek,

In this case the view() method of the dataSource returns a collection of the groups, not the rows, which is the reason for the unexpected behavior. As a workaround you could iterate the Grid rows directly instead of the dataSource items.
E.g.

function dataBound(e) {
    var grid = this;

    grid.tbody.find("tr[role='row']").each(function () {
        var dataItem = grid.dataItem(this);

        if (dataItem.UnitPrice > 30) {
            $(this).find(".k-grid-delete").remove();
        }
    });
}

In the above example I am removing the delete button for items with UnitPrice above 30.

Regards,
Dimiter Madjarov
Telerik

[Derek]

Thank you!

Worked.