Kendo UI grid in MVC with conditional custom command button
I have a KendoUI grid. I am using an MVC web app, everything works fine, but I want to add a custom command button that is conditionally displayed in the UI and just executes the command on my controller passing the required parameter to it.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click())
The command is above, but I want the button to only show when the DataItems IsLocked property is true.
I also can't figure out how to just call and method on the controller. I can't find a demo of this on the Kendo site and don't know how to proceed further.
source to share
Here's an example of using client templates for conditional command buttons.
const string ShowUpdateButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-edit'></span>Update</a>#}#";
const string ShowReverseButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-reverse' href='/JournalDetail/Reverse/#: ID #' ><span class='k-icon k-reverse'></span>Reverse</a>#}#";
const string ShowDeleteButton = "#if (IsAdjustment == true) {#<a class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-delete'></span>Delete</a>#}#";
You can make the template inline, but I find it easier (especially for multiple buttons) if you declare constants and then use string.format to concatenate them.
col.Template(o => o).ClientTemplate(string.Format("{0}{1}{2}", ShowUpdateButton, ShowDeleteButton, ShowReverseButton));
Surface will work with popup editor, whereas jquery hacks ignore conditional status when user cancels edit. Undoing from the popup editor will restore the grid row from view mode or wherever Kendo stores it, resulting in button states before any jquery / javascript hack. The above method will also automatically execute the standard commands as I copied their HTML output for the client template.
The disadvantage is that if Kendo changes its template for command buttons, the client template may fail. I am tired of several other methods besides this one and the disadvantage of this method seems to be better than the other methods.
Note to Kendo Forums: As of the posting date, they do not allow people who do not pay for support to post on the forums, so I would suggest asking posting questions here. They monitor Stack Overflow and in my experience they seem to be faster at answering questions here.
source to share
You can control the visibility of a custom button using the Visible property.
columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click().Visible("unlockAccountVisible"))
The Visible property takes a JS function name and passes the current dataItem as an argument. JS function that evaluates the visibility of a button:
<script>
function unlockAccountVisible(dataItem) {
// show the UnlockAccount button only when data item property IsLocked == true
return dataItem.IsLocked;
}
</script>
Read more in Show Command Buttons Conditionally kendo-ui documentation article.
source to share
As of the December 2018 release of Kendo, you can now conditionally render custom buttons more easily, but it still relies on JavaScript for its work, this function must be defined before creating your dataGrid, otherwise you will run into problems.
function showCommand(dataItem) {
console.log("determining to hide or show" + dataItem);
// show the Edit button for the item with Status='New'
if (dataItem.Status == 'New') {
return true;
}
else {
return false;
}
}
Then the code for the Grid.
.Columns(columns =>
{columns.Command(
command => command.Custom("Approve").Visible("showCommand").Click("approveFunc")
).Width(100).HeaderTemplate("Actions");
source to share