Question

我有一个类似于此的kendo网格（为了清晰起见编辑了代码）：

    var gridList = $('##listBo').kendoGrid({

        ...

        columns: [
            ...
            {
                command: "edit"
                , title: 'Edit' // Need to make this text conditional
                , width: 91
            }
        ]

        ...

        , editable: {
                mode: "popup"
                , template: $("##addEditPopup").html()
                , window: {
                open: loadJSOnWindowLaunch 
                , title: "Reservation request"
            }
            }
        , dataBound: function(e) {
            dataBoundFunction();
        }

    }).data("kendoGrid");

我需要按下按钮说'编辑＆＃39;在某些情况下和＆＃39;查看＆＃39;在其他情况下，基于数据源中的值。

我该如何做到最好？

Answer 1

处理这种情况的一种简单方法是创建自定义命令列，然后使用模板选项，您可以根据条件呈现列按钮。

试试这样：

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                        { field:"ProductName", title: "Product Name" },
                        { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
                        { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                        { field: "Discontinued", width: "120px" },
                        { template: comandTemplate }],
                    editable: "popup"
                });
            });
            // render command column button based on condition
            function comandTemplate(model){
                // here i use Discontinued attribute to data model to show
                // view detail button or edit button
                if(model.Discontinued==0)
                {
                    return '<a class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-edit"></span>Edit</a>';
                }
                else
                {
                    return '<a class="k-button k-button-icontext" href="javascript:void(0)" onclick="viewDetailsAction()">View Details</a>';
                }
            }
            // Custom action if view detail button click
            function viewDetailsAction()
            {
                alert("Your custom action for view detail");
            }

以下是工作示例http://dojo.telerik.com/AdAKO

我希望它会对你有所帮助。

Answer 2

您只需要在此列

中添加自定义列

{ 
   template: "# if (property == true) { # <a class="k-button k-grid-edit" 
   href="#"><span class="k-icon k-edit"></span>Edit</a> # } else { #
   <a class="k-button"><span onClick="callFunction()"
   </span>View</a> # } #", width: "150px"
}

其中＆＃34;属性＆＃34;是一个将用作条件字段以显示不同按钮的字段。

希望，这对你有用。（ThumbsUp）

Kendo网格，更改编辑按钮上的文本

2 个答案: