Question

我有一个简单的Kendo UI网格。网格处于批处理模式并且工作正常。我正在使用Web API来绑定实际的CRUD方法。

我必须有条不紊地隐藏工具栏按钮。如何以及在何处（哪个事件）可以创建此类功能

例如：

If(user.Role.Permission == "Edit"){
   //Show Edit Button else hide
}

这是实际的Kendo UI网格代码

var baseUrl = "/api/TicketType";
 var datatype = "json";
 var contentType = "application/json";

 var datasource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 10,
                autoSync: false,
                batch: true,
                transport: {
                    read: {
                        url: baseUrl,
                        dataType: datatype,
                        contentType: contentType
                    },
                    create: {
                        url: baseUrl,
                        dataType: datatype,
                        contentType: contentType,
                        type: "POST"
                    },
                    update: {
                        url: baseUrl,
                        dataType: datatype,
                        contentType: contentType,
                        type: "PUT"
                    },
                    parameterMap: function (data, operation) {
                        if (operation !== "read" && data.models) {
                            return kendo.stringify(data.models);
                        }
                        else {
                            return {
                                take: data.take,
                                skip: data.skip,
                                pageSize: data.pageSize,
                                page: data.page
                            }
                        }
                    }
                },
                schema: {
                    data: "data.$values",
                    total: "recordCount",
                    model: {
                        id: "TypeID",
                        fields: {
                            TypeID: { editable: false, type: "number" },
                            TypeCode: { editable: true, nullable: false, validation: { required: true } },
                            Description: { editable: true, nullable: false, validation: { required: true } }                            
                        }
                    }
                }
            });

            $("#Grid").kendoGrid({
                dataSource: datasource,
                toolbar: [
                    {name: "create", text: "Add New Record"},
                    { name: "save", text: "Save Changes" },
                    { name: "cancel", text: "Cancel Changes" },
                ],
                columns:
                [
                    { field: "TypeID", width: 50, title: "ID"},
                    { field: "TypeCode", width: 150, title: "Code"},
                    { field: "TypeDescription", width: 200, title: "Description"}
                ]

            })

            datasource.read(); // This will bind to the grid.
        });

Answer 1

如果要显示或隐藏工具栏按钮，则需要在Grid的Databound事件中实现逻辑。

请参阅以下示例： JSBin Databound example

注意：您的问题与Make Command Button invisible in Kendo Grid重复。

Answer 2

请尝试使用以下代码段。

$(document).ready(function () {
    hidetoolbar();
});

function onDataBound(arg) {
    hidetoolbar();
}

function onDataBinding(arg) {
    hidetoolbar();
}


function hidetoolbar(){
    If(user.Role.Permission != "Edit"){
        $("#Grid .k-add").parent().hide(); 
        $("#Grid .k-update").parent().hide();
        $("#Grid .k-cancel").parent().hide();
        //OR
        $("#Grid .k-add").parent().remove(); 
        $("#Grid .k-update").parent().remove();
        $("#Grid .k-cancel").parent().remove();
    }
}

 $("#Grid").kendoGrid({
    dataSource: datasource,
    dataBound: onDataBound, // Added
    dataBinding: onDataBinding, //Added
    toolbar: [
        {name: "create", text: "Add New Record"},
        { name: "save", text: "Save Changes" },
        { name: "cancel", text: "Cancel Changes" },
    ],
    columns:
    [
        { field: "TypeID", width: 50, title: "ID"},
        { field: "TypeCode", width: 150, title: "Code"},
        { field: "TypeDescription", width: 200, title: "Description"}
    ]
});

Kendo UI Grid Toolbox命令（创建，保存，更新）启用Conditional

2 个答案: