在数据网格列中插入双按钮 kendo ui

Question

我想使用 Kendo UI 将两个按钮插入到数据网格的列中。列表的每个元素包含两个按钮示例：EDIT 和 DELETE

Answer 1

我假设您使用 kendo ui 并尝试在每行中设置 编辑和删除按钮这就是您可以通过指定这样的列来完成它的方法。

 { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]

请参阅下面摘自 telerik 示例的代码片段。这里是现场道场sample. The example below uses a popup editing. In case you are using inline editing look into this inline Editing Sample

代码输出：

   <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />

        <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    </head>
    <body>
            <div id="example">
                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                            dataSource = new kendo.data.DataSource({
                                transport: {
                                    read:  {
                                        url: crudServiceBaseUrl + "/Products",
                                        dataType: "jsonp"
                                    },
                                    update: {
                                        url: crudServiceBaseUrl + "/Products/Update",
                                        dataType: "jsonp"
                                    },
                                    destroy: {
                                        url: crudServiceBaseUrl + "/Products/Destroy",
                                        dataType: "jsonp"
                                    },
                                    create: {
                                        url: crudServiceBaseUrl + "/Products/Create",
                                        dataType: "jsonp"
                                    },
                                    parameterMap: function(options, operation) {
                                        if (operation !== "read" && options.models) {
                                            return {models: kendo.stringify(options.models)};
                                        }
                                    }
                                },
                                batch: true,
                                pageSize: 20,
                                schema: {
                                    model: {
                                        id: "ProductID",
                                        fields: {
                                            ProductID: { editable: false, nullable: true },
                                            ProductName: { validation: { required: true } },
                                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                            Discontinued: { type: "boolean" },
                                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                        }
                                    }
                                }
                            });

                        $("#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" },
                                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                            editable: "popup"
                        });
                    });
                </script>
            </div>


    </body>
    </html>

在数据网格列中插入双按钮 kendo ui

insert double button in the data grid columns kendo ui

kendo-grid

kendo-asp.net-mvc