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

3 Answers 2485 Views
Grid
Mu
Top achievements
Rank 1
Mu asked on 10 Oct 2012, 05:52 PM
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,

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 15 Oct 2012, 10:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tobania
Top achievements
Rank 1
commented on 29 May 2013, 01:25 PM

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
Telerik team
commented on 30 May 2013, 11:04 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Peter
Top achievements
Rank 1
commented on 21 Aug 2013, 06:06 PM

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.
0
Vladimir Iliev
Telerik team
answered on 26 Aug 2013, 01:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Gareth
Top achievements
Rank 1
commented on 18 Sep 2013, 06:54 PM

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
Telerik team
commented on 19 Sep 2013, 07:59 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel
Top achievements
Rank 1
commented on 20 Aug 2014, 12:32 PM

Hi All,

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


Regards,
Daniel
BN
Top achievements
Rank 1
commented on 16 Mar 2015, 08:31 PM

Do you have this feature available now?
BN
Top achievements
Rank 1
commented on 16 Mar 2015, 08:31 PM

Do you have this feature available now?  Let me know, very useful feature.
Vladimir Iliev
Telerik team
commented on 17 Mar 2015, 07:41 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Jeff
Top achievements
Rank 1
commented on 28 Jan 2016, 05:45 PM

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

0
Beth
Top achievements
Rank 1
answered on 17 Mar 2017, 07:54 AM

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
Telerik team
commented on 22 Mar 2017, 07:03 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
DuelingCats
Top achievements
Rank 2
commented on 01 Oct 2018, 05:07 PM

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
Telerik team
commented on 04 Oct 2018, 12:28 PM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Mu
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Beth
Top achievements
Rank 1
Share this question
or