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內嵌可編輯

回答

相關問題