Hide edit and delete button based on the status of each record.

[Mu]

columns.Command(command => { command.Edit(); command.Destroy(); })

How can I add condition to each record to hide or show these two button?

If it is impossible, how could I handle the button by checking when user click edit button on each record.

Thank you,

[Vladimir Iliev]

Hi Chanavath,

 
Basically you should use the DataBound client event of the Grid to iterate over the Grid rows and check custom field in the model if the current row is editable and/or deletable. Such example can be:

function onDataBound() {
    //Selects all edit buttons
    $("#Grid tbody tr .k-grid-edit").each(function () {
        var currentDataItem = $("#Grid").data("kendoGrid").dataItem($(this).closest("tr"));

        //Check in the current dataItem if the row is editable
        if (currentDataItem.isEditable == true) {
            $(this).remove();
        }


    })

    //Selects all delete buttons
    $("#Grid tbody tr .k-grid-delete").each(function () {
        var currentDataItem = $("#Grid").data("kendoGrid").dataItem($(this).closest("tr"));

        //Check in the current dataItem if the row is deletable
        if (currentDataItem.isDeletable == true) {
            $(this).remove();
        }
    })
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Tobania]

We have a grid where the editbuttons are always visible. The delete button is only visible when a certain
 property in the row is set to true.

The code you gave work perfect untill we edited a row and clicked the cancel button. In this case the remove is
 visible again. I tried to call the code to remove the button on the Cancel event but this didn't work. I think
 because the cancel event is called to early to do this.

Is there a way to solve this problem ?

Thnx
Sodi We

[Vladimir Iliev]

Hi Sodi,

 
I already answered to this query in duplicated support ticket created by you - #698769. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Kind Regards,
Vladimir Iliev
Telerik

[Peter]

Any chance you could share this solution with the rest of us??
I have the exact same problem. The delete button re-appears when the edit is cancelled.

[Vladimir Iliev]

Hi Peter,

 
Please check the answer below:

I will suggest to use the Edit event of the Grid to attach click event handler to the "Cancel" button in which to manually trigger the DataBound event using setTimeout function.

e.g.:

function onEdit() {
    $(".k-grid-cancel").on("click", function () {
        setTimeout(function () {
            console.log("trigger");
            $("#Grid").data("kendoGrid").trigger("dataBound");
        });
    })
}

Kind Regards,
Vladimir Iliev
Telerik

[Gareth]

I'm using the server wrappers for ASP.Net MVC.  I'd really like to be able to do something like:
columns.Command(command => command.Destroy()).Width(90).DisplayWhen(p => p.isDeletable);  
Is that possible?
Thanks

[Vladimir Iliev]

Hi Gareth,

 
Currently this feature is not supported, however I would suggest to share your idea at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases. 

Kind Regards,
Vladimir Iliev
Telerik

[Daniel]

Hi All,

this would be a fantastic feature!
"Conditional buttons" are a basic requirement in every business application.


Regards,
Daniel

[BN]

Do you have this feature available now?

[BN]

Do you have this feature available now?  Let me know, very useful feature.

[Vladimir Iliev]

Hello Prahlad,

This feature is not yet available - for more information on the matter I would suggest to regularly check the UserVoice portal and Kendo UI RoadMap. 

Regards,
Vladimir Iliev
Telerik

 

 

[Jeff]

If anyone else sees this thread please visit this URL and vote for this feature to be implemented.

 http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/9411468-conditional-for-grid-columns-and-buttons

[Beth]

Try this

$("#Grid").data("kendoGrid").bind("edit", function(e) {

      e.container.find(".k-grid-cancel").click(function (e) {                setTimeout(function () {                    $("#Grid").data("kendoGrid").trigger("dataBound");  }, 100);                    

     });            

});

 

[Stefan]

Hello Beth,

Thank you for sharing the approach with the Kendo UI community.

Also, please note that the mentioned request is already completed and release in February 2017.

Regards,
Stefan
Telerik by Progress

[DuelingCats]

What functionality is it that was added? I am looking in the documentation and don't see any built in feature that hides per row.

[Tsvetomir]

Hello,

As mentioned, the Visible property of the Kendo UI Grid command column has been released in the R1 2017. Here is the article which gives instructions on how this could be implemented:
https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/show-command-buttons-conditionally#show-command-buttons-conditionally

Kind regards,
Tsvetomir
Progress Telerik