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

Question

我有一个看起来有点像这样的剑道网格(为清楚起见编辑了代码):

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

我需要根据数据源中的值，让按钮在某些情况下显示为“编辑”，在其他情况下显示为“查看”。

我如何最好地做到这一点？

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

希望对您有所帮助。