4

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

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

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

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

4

4 回答 4

4

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

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，根据我的经验，他们似乎在这里更快地回答问题。

于 2014-01-09T22:07:01.953 回答
3

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

条件模板在这里和论坛上多次介绍 - 命令列不是那么灵活。

于 2013-02-18T18:10:13.643 回答
2

从 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")
})
于 2019-07-10T17:38:55.227 回答
0

您可以通过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>

在有条件地显示命令按钮kendo-ui 文档文章中阅读更多内容。

于 2019-01-17T14:32:07.113 回答