Fatal编程技术网
  • kendo-ui/
  • Kendo ui 剑道批量编辑与整个网格编辑模式

Kendo ui 剑道批量编辑与整个网格编辑模式

kendo-ui telerik

Kendo ui 剑道批量编辑与整个网格编辑模式,kendo-ui,telerik,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Telerik,Kendo Grid,Kendo Asp.net Mvc,我已经在我的应用程序中实现了剑道网格批量编辑功能。我能够通过剑道提供的默认功能保存更改。以下是我在项目中实现的相同代码： <!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/grid/editing"> <style>html { font-size: 14px; font-family: Arial, Helvetic

我已经在我的应用程序中实现了剑道网格批量编辑功能。我能够通过剑道提供的默认功能保存更改。以下是我在项目中实现的相同代码：

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

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/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,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120, editor: customBoolEditor },
                            { command: "destroy", title: "&nbsp;", width: 150 }],
                        editable: true
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
                }
            </script>
        </div>


</body>
</html>


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
$（文档）.ready（函数（）{
var crudServiceBaseUrl=”https://demos.telerik.com/kendo-ui/service",
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
批次：对，
页面大小：20，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}}，
单价：{type:“number”，验证：{required:true，min:1}，
中止：{type:“boolean”}，
UnitsInStock:{type:“number”，验证：{min:0，必需：true}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
可导航：是的，
pageable:对，
身高：550，
工具栏：[“创建”、“保存”、“取消”]，
栏目：[
“产品名称”，
{字段：“单价”，标题：“单价”，格式：{0:c}，宽度：120}，
{字段：“单位库存”，标题：“库存单位”，宽度：120}，
{字段：“中断”，宽度：120，编辑器：customBoolEditor}，
{命令：“销毁”，标题：，宽度：150}]，
可编辑：真
});
});
函数customBoolEditor（容器、选项）{
var guid=kendo.guid（）；
$（''）。附加到（容器）；
$('​').附件（容器）；
}
我需要一个功能来在编辑模式下显示整个网格，并使用编辑模板显示所有可编辑列。我尝试添加与编辑器模板相同的客户端模板，但行为不符合预期。是否有任何方法可以使用公共模板同时显示客户端模板和编辑器模板

例如。 在上面的例子中，我需要所有行上都有数字文本框的单价。不仅仅是当我点击它时。

这里有一个例子

$("#grid").kendoGrid({
  dataSource: {
    schema: {
      model: {
        id: "id",
        fields: {
          id: { editable: false }
        }
      }
    },
    change: function() {
      $("textarea").val(
        kendo.stringify(this.view())
      );
    },
    data: [
      { id:1, age: 30, name: "John Doe" }
    ]
  },
  columns: [
    { field: "id", width: 50 },
    { field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
    { field: "name", template:"<input data-bind='value: name' >" }
  ],
  dataBound: function() {
    var rows = this.tbody.children();
    var dataItems = this.dataSource.view();
    for (var i = 0; i < dataItems.length; i++)  {
      kendo.bind(rows[i], dataItems[i]);
    }
  }
});

$（“#网格”）.kendoGrid({
数据源：{
模式：{
型号：{
id:“id”，
字段：{
id:{可编辑：false}
}
}
},
更改：函数（）{
$（“textarea”）.val(
kendo.stringify（this.view（））
);
},
数据：[
{id:1，年龄：30，姓名：“John Doe”}
]
},
栏目：[
{字段：“id”，宽度：50}，
{字段：“年龄”，模板：}，
{字段：“名称”，模板：}
],
数据绑定：函数（）{
var rows=this.tbody.children（）；
var dataItems=this.dataSource.view（）；
对于（var i=0；i

网格组件不支持“所有行编辑”模式--。可能存在一些问题，例如。您可能希望在事件鼠标输入时让网格行进入编辑模式，而不是单击