【问题标题】:How to disable button inside kendo grid cell based on some condition?如何根据某些条件禁用剑道网格单元内的按钮?
【发布时间】:2015-11-18 06:42:15
【问题描述】:

我的网格中有 1 个名为 status 的列,并且我的最后一列网格包含 Action 列。

在这个操作列中,我有两个按钮,即编辑和删除

现在,当我的状态值处于待处理状态时,我想使用工具提示禁用我的删除按钮无法删除状态为待处理以外的记录

这是我的代码:

                    {
                        field: "Status",
                        title: "Status",
                        width: 200,
                        template: '#if(Status) {#Approved#} else{#Pending#}#'
                    },
                    {
                       field: "Id",
                       title: "Action",
                       width: 60,
                       template: "<a title='Edit' href=''></a><a onclick='javascript:return Delete(\"#:Id#\",\"grid2\");' title='delete'><img src='@Url.Content("~/img/delete.png")' /></a> //Disable this delete when status is except pending.
                       sortable: false
                   }

如何做到这一点??

【问题讨论】:

    标签: javascript kendo-ui telerik kendo-grid telerik-grid


    【解决方案1】:

    请尝试使用以下代码 sn-p。我们无法禁用锚标记,因此我从锚标记中删除了 onclick 事件,其状态为待处理。

    columns: [{
        field: "Status",
        title: "Status"
    },
    {
        field: "StudentID",
        title: "Action",
        template: "<a title='Edit' href=''>Edit</a> " +
                    "#if(Status=='Approved'){#   <a onclick='javascript:return Delete(\"#:StudentID#\",\"grid2\");' title='delete'>Delete</a> #}#" +
                    "#if(Status=='Pending'){#   <a title='Cant delete record with status except pending'>Delete</a> #}#"
    
    
    }]
    

    样本数据:

    【讨论】:

    • 只是想问你 1 个问题,我在锚标记之间放置了用于编辑和删除的图像按钮,因此当悬停在编辑标记上时,我的指针变成手形,但在删除按钮的情况下不会。你对此有什么想法吗?
    • 在我们的例子中,对于编辑按钮,剑道将自动应用 CSS,而对于删除,我们必须手动应用样式属性。有关更多详细信息,请查看以下链接。 w3schools.com/cssref/tryit.asp?filename=trycss_cursor 另外我也更新了我上面的答案。
    • 我对此进行了调查,发现没有任何 kendo-CSS 属性应用于任何(编辑/删除)锚标记。它仅在编辑按钮中显示指针光标,因为我们在按钮中添加了“href”属性。
    • 好的,因为编辑按钮中的 href 属性,它显示了指针。明白了。谢谢
    • 兄弟你能帮我解决这个问题吗?我被困在这个问题上了:stackoverflow.com/questions/34218159/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-08-24
    • 1970-01-01
    • 2014-10-10
    • 2013-11-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多