2013-01-08 22 views
3

當完成以下操作時,網格行爲不符合預期。剛剛添加的數據在劍道網格中未正確保存

  1. 添加新的記錄
  2. 然後按網格中的更新按鈕(新添加的行)
  3. 然後按取消保存之前。

當上面的動作完成時,新添加的行消失。 link to js fiddle

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Demo Grid App</title> 
    <!-- CDN-based stylesheet reference for Kendo UI DataViz --> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css"> 
      <!-- CDN-based script reference for jQuery; utilizing a local reference if offline --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <!-- CDN-based script reference for Kendo UI DataViz; utilizing a local reference if offline --> 
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script> 

</head> 
<body> 
    <header> 
     <h1>Demo Grid App</h1> 
    </header> 

<div id="grid"></div> 
      <script> 
      var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"], 
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"], 
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"], 
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer", 
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"], 
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")]; 

function createRandomData(count) { 
    var data = [], 
     now = new Date(); 
    for (var i = 0; i < count; i++) { 
     var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], 
      lastName = lastNames[Math.floor(Math.random() * lastNames.length)], 
      city = cities[Math.floor(Math.random() * cities.length)], 
      title = titles[Math.floor(Math.random() * titles.length)], 
      birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], 
      age = now.getFullYear() - birthDate.getFullYear(); 

     data.push({ 
      Id: i + 1, 
      FirstName: firstName, 
      LastName: lastName, 
      City: city, 
      Title: title, 
      BirthDate: birthDate, 
      Age: age 
     }); 
    } 
    return data; 
} 

function generatePeople(itemCount, callback) { 
    var data = [], 
     delay = 25, 
     interval = 500, 
     starttime; 

    var now = new Date(); 
    setTimeout(function() { 
     starttime = +new Date(); 
     do { 
      var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], 
       lastName = lastNames[Math.floor(Math.random() * lastNames.length)], 
       city = cities[Math.floor(Math.random() * cities.length)], 
       title = titles[Math.floor(Math.random() * titles.length)], 
       birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], 
       age = now.getFullYear() - birthDate.getFullYear(); 

      data.push({ 
       Id: data.length + 1, 
       FirstName: firstName, 
       LastName: lastName, 
       City: city, 
       Title: title, 
       BirthDate: birthDate, 
       Age: age 
      }); 
     } while(data.length < itemCount && +new Date() - starttime < interval); 

     if (data.length < itemCount) { 
      setTimeout(arguments.callee, delay); 
     } else { 
      callback(data); 
     } 
    }, delay); 
} 
       $(document).ready(function() { 
        $("#grid").kendoGrid({ 

         dataSource: { 
          data: createRandomData(10), 


          schema: { 
           model: { 
            id:"FirstName", 
            fields: { 
             LastName: { type: "string" }, 
             City: { type: "string" }, 
             Title: { type: "string" }, 
             BirthDate: { type: "date" }, 
             Age: { type: "number" } 
            } 
           } 
          }, 
          pageSize: 10 
         }, 
         height: 500, 
         width:300, 
         toolbar: ["create"], 
         scrollable: true, 
         sortable: true, 
         filterable: true, 
         pageable: { 
          input: true, 
          numeric: false 
         }, 
         columns: [ 

          { 
           field: "LastName", 
           title: "Last Name", 

          }, 
          { 
           field: "City", 

          }, 
          { 
           field: "Title" 
          }, 
          { 
           field: "BirthDate", 
           title: "Birth Date", 
           template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' 
          }, 
          { 
           field: "Age", 
           width: 50 
          }, 
           { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }, 
         ], 
         editable: "inline" 
        }); 
       }); 
      </script> 
    <div role="main"> 
    </div> 
    <footer> 
    </footer> 
</body> 
</html> 

回答

4

行爲的預期。問題來自於新創建的記錄沒有ID,這就是爲什麼他們被認爲是新的。您可以用isNew()方法檢查。

當您取消編輯新記錄(尚未同步)時,它將被刪除。該操作與按下「添加新記錄」和「取消」相同。

這裏是an example演示如何使用本地數據執行CRUD操作。

 transport: { 
      read: function(o) { 
       //pass the date 
       o.success(data); 
      }, 
      create: function(o) { 
       var item = o.data; 
       //assign a unique ID and return the record 
       counter++; 
       item.Id = counter; 
       o.success(item); 
      }, 
      update: function(o) { 
       //edit the local array and mark the operation as successful 
       o.success(); 
      }, 
      destroy: function(o) { 
       //edit the local array and mark the operation as successful 
       o.success(); 
      } 
     } 
+0

遺漏的類型錯誤:不能調用方法「呼籲」的未定義此錯誤是在小提琴來。當更新現有的行 –

+0

我固定的。該問題是由錯誤語法引起的,正確的傳輸名稱是「update」而不是編輯。 – sasheto

+0

感謝您的幫助。 –