Destroy Command Conditianally

5 posts, 1 answers
  1. Edwin
    Edwin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 09 Jun 2015 Link to this post

    Hi,

     I am bind the kendo grid @ Client side. Any idea of how to show the destroy delete command based on other column status? Appreciate your help on this.

     

    Thanks,

    Edwin

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 10 Jun 2015 Link to this post

    Hello Edwin,

    Since the current Grid is bound via Ajax, you could use the dataBound event handler to achieve the task.

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

    function dataBound(e) {
        var grid = this;
        grid.tbody.find("tr[role='row']").each(function (e) {
            var model = grid.dataItem(this);
     
            if (model.UnitPrice > 20) {
                $(this).find(".k-grid-delete").remove();
            }
        });
    }

    The current example removes the destroy command for items with UnitPrice over 20.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Edwin
    Edwin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 10 Jun 2015 in reply to Dimiter Madjarov Link to this post

    Thanks Dimiter Madjarov. It works. Now below is the issue I am facing. I am trying to replace the destroy Delete text with the Delete Image.

    Issue 1: When I click on the Delete icon is not firing the editable confirmation function but if I remove the template column the editable confirmation function is working.

    Issue 2: After replacing the image the above databound function which you have mentioned is not working. I assume that this is because of the template column. Any idea of how to resolve this or is there any other way to implement this?

    Sample Code:

    command: [{ name: "destroy", template: "<img src='../Images/delete.png' title='Delete' style='cursor: pointer;height:13px;width:13px;'/>"}], title: " ", width: 70

    Editable Confirmation Function:

    editable: {
    confirmation: function (e) {
    if (e.DeleteAction == 'y')
    return "Are you sure that you want to delete record for " + e.Name + "?";
    }
    }

    Databound event:

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

    if (model.DeleteAction != 'y') {
    $(this).find(".k-grid-delete").remove();
    }
    });

     

    Appreciate your help on this.

     

    Thanks,

    Edwin

  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 11 Jun 2015 Link to this post

    Hello Edwin,

    The sample code provided in the previous post looks for the built in destroy command button via it's k-grid-delete class. Regarding the sample code from the last post, setting a template for a command is not supported. If custom delete button/image should be used, you could add a template column instead and invoke the removeRow method on click of this image. In order to preserve the initial conditional hiding logic you could add your own CSS class to the images and use it in the sample code from the first post.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Edwin
    Edwin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 11 Jun 2015 in reply to Dimiter Madjarov Link to this post

    Thanks Dimiter Madjarov.
Back to Top