带有条件自定义命令按钮的 MVC 中的 Kendo UI 网格答案

【问题标题】：Kendo UI Grid in MVC with Conditional Custom Command Button带有条件自定义命令按钮的 MVC 中的 Kendo UI 网格
【发布时间】：2013-02-18 18:02:24
【问题描述】：

我有一个 KendoUI Grid 我正在使用一个 MVC Web 应用程序，一切正常，但是我想添加一个自定义命令按钮，该按钮有条件地显示在 UI 中，并简单地在我的控制器上执行一个命令，传递给它所需的参数。

columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click())

命令如上指定，但我只希望按钮在 DataItems IsLocked 属性为 true 时显示。

我也无法弄清楚如何在控制器上调用和方法。我在 Kendo 网站上找不到此演示，也不知道如何推进。

【问题讨论】：

标签： asp.net-mvc button command kendo-ui kendo-grid

【解决方案1】：

以下是使用客户端模板作为条件命令按钮的具体示例。

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>#}#";

您可以内联模板，但如果您声明常量然后使用 string.format 连接它们，我发现它更容易（特别是对于多个按钮）。

col.Template(o => o).ClientTemplate(string.Format("{0}{1}{2}", ShowUpdateButton, ShowDeleteButton, ShowReverseButton));

好处是它可以与弹出编辑器一起使用，而当用户取消编辑时，jquery hacks 将忽略条件状态。弹出编辑器中的取消将从视图模型或 Kendo 存储它的任何位置恢复网格行，这会导致任何 jquery/javascript hack 之前的按钮状态。由于我为客户端模板复制了它们的 HTML 输出，因此上述方法还将自动连接标准命令。

缺点是，如果 Kendo 更改命令按钮的模式，客户端模板可能会失败。除了这个之外，我厌倦了其他几种方法，这种方法的缺点似乎比其他方法更好。

关于剑道论坛的注意事项：截至本文发布之日，他们似乎不允许不支付支持费用的人在论坛上发帖，所以我建议在这里发布问题。他们监控 Stack Overflow，根据我的经验，他们似乎在这里更快地回答问题。

【讨论】：

【解决方案2】：

改用模板列 - 通过 ClientTemplate 方法。

here 覆盖了条件模板，并且在论坛上多次出现 - 命令列没有那么灵活。

【讨论】：

【解决方案3】：

从 2018 年 12 月发布的 Kendo 开始，您现在可以更轻松地有条件地显示自定义按钮，但它仍然依赖 JavaScript 来完成其工作，此函数应在您的 dataGrid 之前定义，否则您会遇到问题。

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;
        }       
}

然后是网格的代码。

.Columns (columns => {
columns.Command (
        command => command.Custom ("Approve")
        .Visible ("showCommand")
        .Click ("approveFunc")
    )
    .Width (100)
    .HeaderTemplate ("Actions")
})

【讨论】：

假设人们正在使用更高版本的 Kendo 工具集，这绝对是最简单的解决方案。

【解决方案4】：

您可以通过 Visible 属性控制自定义命令按钮的可见性。

columns.Command(command => command.Custom("UnlockAccount").SendDataKeys(true).Click().Visible("unlockAccountVisible"))

Visible 属性接受 JS 函数名称并将当前 dataItem 作为参数传递。评估按钮可见性的 JS 函数：

<script>
  function unlockAccountVisible(dataItem) {
  // show the UnlockAccount button only when data item property IsLocked == true
  return dataItem.IsLocked;
  }
</script>

在Show Command Buttons Conditionallykendo-ui 文档文章中了解更多信息。

【讨论】：