Fatal编程技术网
  • kendo-ui/
  • Kendo ui 网格和弹出式编辑器中的不同列

Kendo ui 网格和弹出式编辑器中的不同列

kendo-ui telerik

Kendo ui 网格和弹出式编辑器中的不同列,kendo-ui,telerik,kendo-grid,Kendo Ui,Telerik,Kendo Grid,有没有办法只在网格中显示几列，而在编辑器中将其他列显示为字段 假设网格在只读模式下只显示基本信息“ID”、“Name”、“Description”，但用户可以进行完整编辑，弹出编辑器将数据源中的其他字段显示为“Type”、“Date”、“Category” 有很多方法可以从编辑器中隐藏字段，但是如何从网格中隐藏字段并在编辑器中显示？您可以通过使用列的隐藏属性来实现这一点。在下面的演示中，我隐藏了UnitsInStock和UnitPrice列，但它显示在弹出的编辑窗口中 <!DOCTYPE

有没有办法只在网格中显示几列，而在编辑器中将其他列显示为字段

假设网格在只读模式下只显示基本信息“ID”、“Name”、“Description”，但用户可以进行完整编辑，弹出编辑器将数据源中的其他字段显示为“Type”、“Date”、“Category”

有很多方法可以从编辑器中隐藏字段，但是如何从网格中隐藏字段并在编辑器中显示？

您可以通过使用列的隐藏属性来实现这一点。在下面的演示中，我隐藏了UnitsInStock和UnitPrice列，但它显示在弹出的编辑窗口中

<!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/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

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

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "//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" , hidden: true, },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px",hidden: true, },
                            { field: "Discontinued", width: "120px"  },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup"
                    });
                });
            </script>
        </div>


</body>
</html>


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
$（文档）.ready（函数（）{
var crudServiceBaseUrl=“//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}”，宽度：“120px”，隐藏：真，}，
{字段：“UnitsInStock”，标题：“库存单位”，宽度：“120px”，隐藏：true，}，
{字段：“中断”，宽度：“120px”}，
{命令：[“编辑”、“销毁”]，标题：“”，宽度：“250px”}]，
可编辑：“弹出窗口”
});
});
如果有任何问题，请告诉我。

您可以通过使用列的隐藏属性来实现这一点。在下面的演示中，我隐藏了UnitsInStock和UnitPrice列，但它显示在弹出的编辑窗口中

<!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/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

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

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "//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" , hidden: true, },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px",hidden: true, },
                            { field: "Discontinued", width: "120px"  },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup"
                    });
                });
            </script>
        </div>


</body>
</html>


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
$（文档）.ready（函数（）{
var crudServiceBaseUrl=“//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”，