Question

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

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

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

我也无法弄清楚如何在控制器上调用和方法。我无法在剑道网站上找到这样的演示，也不确定如何推进这一过程。

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

Answer 2

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

条件模板在论坛上被覆盖here多次 - 命令列不那么灵活。

Answer 3

您可以通过 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 Conditionally kendo-ui文档文章中了解更多信息。

Answer 4

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

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");

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

4 个答案: