Kendo内嵌可编辑

我想只为一个字段制作内嵌可编辑网格。

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

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script> 
</head> 
<body> 
     <div id="example"> 
      <div id="grid"></div> 

      <script> 
       $(document).ready(function() { 
        var crudServiceBaseUrl = "http://localhost/final", 
         dataSource = new kendo.data.DataSource({ 
          transport: { 
           read: { 
            url: crudServiceBaseUrl + "/home/get", 
            dataType: "json", 
            method: 'POST' 
           }, 
           update: { 
            url: crudServiceBaseUrl + "/home/Update", 
            dataType: "json" 
           }, 
           parameterMap: function(options) { 
            var query = {project: ' AAA ', type: 'search?query='}; 
            query.startAt  = options.skip; 
            query.maxResults = options.pageSize; 
            return query; 
           } 
          }, 
          batch: true, 
          pageSize: 10, 
          schema: { 
           data: 'issues', 
           total: 'total', 
           model: { 
            fields: { 
             'key': { type: 'string' }, 
             'fields.issuetype.iconUrl': { editable: false}, 
             'fields.summary': { editable: false}, 
             'fields.priority.iconUrl': { editable: false}, 
             'fields.status.name': { editable: false}, 
             'fields.reporter.displayName': { editable: false}, 
             'fields.created': { editable: false }, 
             'fields.updated': { editable: false }, 
             'fields.duedate': { editable: false } 
            } 
           } 
          } 
         }); 

        $("#grid").kendoGrid({ 
         dataSource: dataSource, 
         pageable: true, 
         height: 550, 
         columns: [{ 
             field: "key", 
             title: "Key" 
            }, { 
             field: "fields.issuetype.iconUrl", 
             title: "Type" 
            }, { 
             field: "fields.summary", 
             title: "Summary" 
            },{ 
             field: "fields.priority.iconUrl", 
             title: "Priority" 
            }, { 
             field: "fields.status.name", 
             title: "Status" 
            }, { 
             field: "fields.reporter.displayName", 
             title: "Reporter" 
            }, { 
             field: "fields.created", 
             title: "Created" 
            }, { 
             field: "fields.updated", 
             title: "Updated" 
            }, { 
             field: "fields.duedate", 
             title: "Due Date" 
            }], 
        editable: true 
        }); 
       }); 
      </script> 
     </div> 


</body> 
</html>

这是我的代码。问题是每个字段都是可编辑的。我想让可编辑的唯一关键字段。

这是kendo可编辑网格演示和我有相同的代码，但kendo的代码工作，但我的代码没有。演示：http://dojo.telerik.com/eWOxo/2

来源

2015-05-07 zarandaaa

我认为这里有两个问题。

首先你需要在你的数据源指定ID列：

model: { 
    id: "WhateverYourIDColumnIs", 
    fields: { 
     'key': { type: 'string' }, 
     'fields.issuetype.iconUrl': { editable: false}, 
     'fields.summary': { editable: false}, 
     'fields.priority.iconUrl': { editable: false}, 
     'fields.status.name': { editable: false}, 
     'fields.reporter.displayName': { editable: false}, 
     'fields.created': { editable: false }, 
     'fields.updated': { editable: false }, 
     'fields.duedate': { editable: false } 
    } 
}

其次，在网格的定义已指定editable: true这应该是editable: "inline"

来源

2015-05-07 10:20:37 codingbadger

没有工作。我试过在剑道演示，并删除“ID：”WhateverYourIDColumnIs“”并设置可编辑：真，那里工作完美。我不明白发生了什么 – zarandaaa

通过设置'editable：true'，您不会'内联'编辑 - 您将获得'incell'编辑。 – codingbadger

Kendo内嵌可编辑

回答

相关问题