Kendo ui 剑道UI工具栏按钮

我使用的是剑道UI网格，如下所示：

        function refreshGrid()
        {
            $(".k-pager-refresh.k-link").click();
        }
        var editWindow;
        var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
        var gridColumns =
        [{
            width: 90,
            command: { 
                name: "edit",
                text: "Edit", 
                click: function(e) {
                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    editWindow = $("#edit").kendoWindow({
                        title: "Edit User",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 800,
                        height: 400,
                        content: 'myediturl' + dataItem.ID
                    });

                    editWindow.data("kendoWindow").center().open();
                    return false;
                }
            }
        },
        {
            width: 90,
            command: { 
                name: "delete",
                text: "Delete", 
                click: function(e) {
                    //alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
                    var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
                    if (confirm("Are you sure you want to delete this user?"))
                    {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
                            success: function (param) { refreshGrid(); },
                            async: false
                        });
                    }
                    return false;
                }
            }
        },
        {
            field: "FullName",
            title: "Full Name",
            type: "string"
        },
        {
            field: "Email",
            title: "Email",
            type: "string"
        },
        {
            field: "LogCreateDate",
            title: "Created",
            type: "date",
            template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
        }];

        //getSorts the columns of the grid
        function getColumns() {
            //Parsing the set of columns into a more digestable form
            var columns = "";
            for (var col in gridColumns) {
                if (!!gridColumns[col].field)
                {
                    if (columns.length > 0) {
                        columns += ";";
                    }
                    columns += gridColumns[col].field + "," + gridColumns[col].type;
                }
            }
            return columns;
        }

        function getSorts(sortObject) {
            if (!(sortObject)) {
                return "";
            }
            //Getting the row sort object
            var arr = sortObject;
            if ((arr) && (arr.length == 0)) {
                return "";
            }
            //Parsing the sort object into a more digestable form
            var columnSet = getColumns();
            var returnValue = "";
            for (var index in arr) {
                var type = "";
                for (var col in gridColumns) {
                    if (gridColumns[col].field === arr[index].field) {
                        type = gridColumns[col].type;
                    }
                }
                returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
            }
            return returnValue;
        }

        var grid;
        $(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "mydatasourceurl",
                            type: "POST",
                        },
                        parameterMap: function (data, type) {
                            data.filters = JSON.stringify(data.filter);
                            data.columns = JSON.stringify(getColumns());
                            data.sorts = JSON.stringify(getSorts(data.sort));
                            console.log(data);
                            return data;
                        }
                    },
                    schema: {
                        fields: fields,
                        data: "Data",
                        total: "Total"
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },

                toolbar: [{
                    name: "Add",
                    text: "Add new record",
                    click: function(e){console.log("foo"); return false;}
                }],
                height: 392,
                groupable: false,
                sortable: true,
                filterable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true
                },
                columns: gridColumns
            });
            grid = $("#grid").data("kendoGrid");
        });

$(".k-button.k-button-icontext.k-grid-add").click(function () {
    //If the window doesn't exist yet, we create and initialize it
    if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
        grids[gridContainerID].addWindow.kendoWindow({
            title: "Add " + entityName,
            width: "60%",
            height: "60%",
            close: onClose,
            open: onAddOpen,
            content: addUrl
        });
    }
    //Otherwise we just open it
    else {
        grids[gridContainerID].addWindow.data("kendoWindow").open();
    }
    //Centralizing and refreshing to prepare the layout
    grids[gridContainerID].addWindow.data("kendoWindow").center();
    grids[gridContainerID].addWindow.data("kendoWindow").refresh();
    return false;
});

单击时不会触发“创建工具栏”操作。如何解决这个问题，剑道UI是否能够处理工具栏点击事件？我提出的最佳解决方案如下所示：

        function refreshGrid()
        {
            $(".k-pager-refresh.k-link").click();
        }
        var editWindow;
        var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
        var gridColumns =
        [{
            width: 90,
            command: { 
                name: "edit",
                text: "Edit", 
                click: function(e) {
                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    editWindow = $("#edit").kendoWindow({
                        title: "Edit User",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 800,
                        height: 400,
                        content: 'myediturl' + dataItem.ID
                    });

                    editWindow.data("kendoWindow").center().open();
                    return false;
                }
            }
        },
        {
            width: 90,
            command: { 
                name: "delete",
                text: "Delete", 
                click: function(e) {
                    //alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
                    var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
                    if (confirm("Are you sure you want to delete this user?"))
                    {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
                            success: function (param) { refreshGrid(); },
                            async: false
                        });
                    }
                    return false;
                }
            }
        },
        {
            field: "FullName",
            title: "Full Name",
            type: "string"
        },
        {
            field: "Email",
            title: "Email",
            type: "string"
        },
        {
            field: "LogCreateDate",
            title: "Created",
            type: "date",
            template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
        }];

        //getSorts the columns of the grid
        function getColumns() {
            //Parsing the set of columns into a more digestable form
            var columns = "";
            for (var col in gridColumns) {
                if (!!gridColumns[col].field)
                {
                    if (columns.length > 0) {
                        columns += ";";
                    }
                    columns += gridColumns[col].field + "," + gridColumns[col].type;
                }
            }
            return columns;
        }

        function getSorts(sortObject) {
            if (!(sortObject)) {
                return "";
            }
            //Getting the row sort object
            var arr = sortObject;
            if ((arr) && (arr.length == 0)) {
                return "";
            }
            //Parsing the sort object into a more digestable form
            var columnSet = getColumns();
            var returnValue = "";
            for (var index in arr) {
                var type = "";
                for (var col in gridColumns) {
                    if (gridColumns[col].field === arr[index].field) {
                        type = gridColumns[col].type;
                    }
                }
                returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
            }
            return returnValue;
        }

        var grid;
        $(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "mydatasourceurl",
                            type: "POST",
                        },
                        parameterMap: function (data, type) {
                            data.filters = JSON.stringify(data.filter);
                            data.columns = JSON.stringify(getColumns());
                            data.sorts = JSON.stringify(getSorts(data.sort));
                            console.log(data);
                            return data;
                        }
                    },
                    schema: {
                        fields: fields,
                        data: "Data",
                        total: "Total"
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },

                toolbar: [{
                    name: "Add",
                    text: "Add new record",
                    click: function(e){console.log("foo"); return false;}
                }],
                height: 392,
                groupable: false,
                sortable: true,
                filterable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true
                },
                columns: gridColumns
            });
            grid = $("#grid").data("kendoGrid");
        });

$(".k-button.k-button-icontext.k-grid-add").click(function () {
    //If the window doesn't exist yet, we create and initialize it
    if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
        grids[gridContainerID].addWindow.kendoWindow({
            title: "Add " + entityName,
            width: "60%",
            height: "60%",
            close: onClose,
            open: onAddOpen,
            content: addUrl
        });
    }
    //Otherwise we just open it
    else {
        grids[gridContainerID].addWindow.data("kendoWindow").open();
    }
    //Centralizing and refreshing to prepare the layout
    grids[gridContainerID].addWindow.data("kendoWindow").center();
    grids[gridContainerID].addWindow.data("kendoWindow").refresh();
    return false;
});

---

提前感谢。

不要使用复杂的选择器，而是使用剑道UI从

name

创建的选择器：

toolbar: [
    {
        name: "Add",
        text: "Add new record",
        click: function(e){console.log("foo"); return false;}
    }
],

然后：

$(".k-grid-Add", "#grid").bind("click", function (ev) {
     // your code
     alert("Hello");
});

在kendogrid中，文档显示网格工具栏按钮（如grid.colums.commands）没有单击配置。 要解决此问题，可以参考以下步骤：

为工具栏创建模板

<script id="grid_toolbar" type="text/x-kendo-template">
      <button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>

---

谢谢你的回答，OnaBai，但是$（.k-grid-Add），“#grid”）是不正确的，因为每当我在网格内单击时，它总是运行我的事件，这显然不是目标。但是需要使用#grid来确保运行与网格关联的事件，以防止在两个网格存在且两个工具栏项具有相同名称时出现问题。因此选择器应该是$（“#grid.k-grid-add”）。如果你据此编辑你的答案，我将接受你的答案为正确答案。再次感谢你。我认为我写的是正确的。我所做的$（“.k-grid-Add”，“#grid”）与$（“#grid.k-grid-Add”）基本相同，但使用了不同的表示法（使用上下文）。请检查一下，非常感谢您的帮助answer@OnaBai，如果我想使用自己的按钮调用网格的addnew弹出编辑器，我该怎么做？thanks@sendreams我不太明白你的问题。是否要使用按钮打开默认弹出窗口？以下是指向支持此功能的acutal spot的链接：