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
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
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
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.
Vladimir Iliev
Telerik
I have the exact same problem. The delete button re-appears when the edit is cancelled.
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"
);
});
})
}
Vladimir Iliev
Telerik
columns.Command(command => command.Destroy()).Width(90).DisplayWhen(p => p.isDeletable);
Is that possible?
Thanks
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.
Vladimir Iliev
Telerik
this would be a fantastic feature!
"Conditional buttons" are a basic requirement in every business application.
Regards,
Daniel
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
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
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);
});
});
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
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