Display Edit/Delete button based on record column

[Dan]

Hi,

If I want to display edit and delete button for the record which CanEdit column is true, can you suggest how to do that?

columns.Bound(p => p.CanEdit).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

Thanks
Dan

[Dimiter Madjarov]

Hello Dan,


To achieve this in an Ajax bounded Grid you should bind to the dataBound event and add a custom class, to the rows, that will not be editable.
E.g.

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

function dataBound(e) {
    var gridData = this.dataSource.view();
    for (var i = 0; i < gridData.length; i++) {
        var currentUid = gridData[i].uid;
        if (gridData[i].CanEdit == false) {
            var currenRow = this.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("notEditable");
        }
    }
}

and then hide the edit and delete buttons via CSS
E.g.

.notEditable .k-grid-edit
{
    display: none;
}

.notEditable .k-grid-delete
{
    display: none;
}

 

All the best,
Dimiter Madjarov
the Telerik team

[Dan]

Hi Dimiter.

Thank you so much. 
It works very well except the css - edit button cannot hide.

But by adding this, it works as expected.
.notEditable {    display: none;}  

Thanks again
Dan