2013-01-08 10 views
3

다음 작업을 수행하면 예상대로 그리드가 작동하지 않습니다. 검도 그리드에 새로 추가 된 데이터가 제대로 저장되지 않았습니다.

  1. 다음 그리드의 업데이트 버튼 (신규 추가 된 행)
  2. 다음 저장하기 전에 취소를 눌렀를 눌러 새 레코드를 추가 할 수 있습니다.

위 작업이 완료되면 새로 추가 된 행이 사라집니다. 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() 방법으로 확인하실 수 있습니다.

새 레코드 편집을 취소하면 (아직 동기화되지 않은 경우) 제거됩니다. 이 동작은 "새 레코드 추가"를 누른 다음 "취소"와 동일합니다.

여기 로컬 데이터로 CRUD 작업을 구현하는 방법을 보여주는 an example입니다.

 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

catch되지 않은 형식 오류 : 메서드를 호출 할 수 없습니다 '전화'정의의이 오류가 행 –

+0

기존의 내가 그 고정 업데이트 .when 바이올린에오고있다. 문제는 잘못된 구문으로 인해 발생했습니다. 올바른 전송 이름은 "업데이트"편집이 아닙니다. – sasheto

+0

도와 주셔서 감사합니다. –

관련 문제