Display Edit/Delete button based on record column

3 posts, 0 answers
  1. Dan
    Dan avatar
    9 posts
    Member since:
    May 2013

    Posted 16 May 2013 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 16 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dan
    Dan avatar
    9 posts
    Member since:
    May 2013

    Posted 16 May 2013 Link to this post

    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

Back to Top