ローカルデータで剣道グリッドに完全なCRUD機能を持たせることは可能ですか

Question

現在、私は剣道グリッドを実装しています。 です。私は自分のアクションからJSON文字列を生成し、その文字列をビューページに提供しています。

最後に、ローカルデータで完全なCRUD関数を実装することが可能かどうかを知りたいですか？

これまでに書かれたコードのサンプルです。

<div id="example" class="k-content">    
     <div id="grid"></div>    
     <script>     
      $(document).ready(function() { 
       var myData = ${coursemodules}, 
       dataSource = new kendo.data.DataSource({ 
        data: myData,       
        batch: true,        
        pageSize: 30,        
        schema: {         
         model: { 
          id: "id", 
          fields: {          
           id: { editable: false, nullable: true},           
           name: { type: "string", validation: { required: true }}, 
           qualificationLevel: { type: "string", validation: { required: true }}, 
           description: { type: "string", validation: { required: true }},           
           published: { type: "boolean" }, 
           gateApprove: { type: "boolean" }, 
           duration: { type: "number", validation: { min: 1, required: true } }, 
           academicBody: { type: "string" } 
          }         
         }        
        }       
       }); 

       $("#grid").kendoGrid({       
        dataSource: dataSource, 
        height: 350,       
        scrollable: true,       
        sortable: true,             
        pageable: true, 
        toolbar: ["create", "save", "cancel"], 
        columns: [        
         {         
          field: "id",         
          title: "ID", 
          width: '3%' 
         },        
         {         
          field: "name",         
          title: "Course Title", 
          width: '20%' 
         },        
         {         
          field: "description", 
          title:"Description", 
          width: '35%' 
         },        
         {         
          field: "published", 
          title: "Published", 
          width: '7%' 
         }, 
         {         
          field: "gateApprove", 
          title: "Gate Approve", 
          width: '7%' 
         }, 
         {         
          field: "duration", 
          title: "Duration", 
          width: '5%' 
         }, 
         {         
          field: "academicBody.shortName", 
          title: "Academic Body", 
          width: '10%' 
         } 
        ], 
        editable: true 
       });     
      });    
     </script>   
    </div> 

データソースでは、CRUDを実装するためにトランスポートを宣言する必要があります。しかし、私は "データ"を宣言する必要があります。私は輸送とデータの両方を宣言しようとしました。それはうまくいかないようです。

Answer 1

ローカルデータをバインドするとき、グリッドウィジェットはローカルトランスポートを表す抽象化を利用します。したがって、カスタム転送は必要ありません。グリッドで行われた変更は、バインドされたデータソースに反映されます。これには、取り消しによるロールバックが含まれます。

Answer 2

はいできますこちらはJSFiddleです。これがお役に立てば幸いです。

// this should be updated when new entries are added, updated or deleted 

var data = 
    [{ 
     "ID": 3, 
     "TopMenuId": 2, 
     "Title": "Cashier", 
     "Link": "www.fake123.com"}, 
    { 
     "ID": 4, 
     "TopMenuId": 2, 
     "Title": "Deposit", 
     "Link": "www.fake123.com"} 
    ]; 


$("#grid").kendoGrid({ 
    dataSource: { 
     transport: { 
      read: function(options) { 
       options.success(data); 
      }, 
      create: function(options) { 
       alert(data.length); 
      }, 
      update: function(options) { 
       alert("Update"); 
      }, 
      destroy: function(options) { 
       alert("Destroy"); 
       alert(data.length); 
      } 
     }, 
     batch: true, 
     pageSize: 4, 
     schema: { 
      model: { 
       id: "ID", 
       fields: { 
        ID: { 
         editable: false, 
         nullable: true 
        }, 
        TopMenuId: { 
         editable: false, 
         nullable: true 
        }, 
        Title: { 
         editable: true, 
         validation: { 
          required: true 
         } 
        }, 
        Link: { 
         editable: true 
        } 
       } 
      }, 
      data: "", 
      total: function(result) { 
       result = result.data || result; 
       return result.length || 0; 
      } 
     } 
    }, 
    editable: true, 
    toolbar: ["create", "save", "cancel"], 
    height: 250, 
    scrollable: true, 
    sortable: true, 
    filterable: false, 
    pageable: true, 
    columns: [ 
     { 
     field: "TopMenuId", 
     title: "Menu Id"}, 
    { 
     field: "Title", 
     title: "Title"}, 
     { 
     field: "Link", 
     title: "Link"}, 
    { 
     command: "destroy"} 
    ] 
}); 

Answer 3

本の完全な機能の例はあなたが必要なものtelerik documentation

であるアップデートのローカルソースのカスタムCRUDのfuntionsとdataSourceオブジェクトにtransportブロックを定義しています。

transport: { 
      create: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 
      options.data.ID = localData[localData.length-1].ID + 1; 
      localData.push(options.data); 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(options.data); 
      }, 
      read: function(options){ 
       var localData = JSON.parse(localStorage["grid_data"]); 
       options.success(localData); 
      }, 
      update: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 

      for(var i=0; i<localData.length; i++){ 
       if(localData[i].ID == options.data.ID){ 
       localData[i].Value = options.data.Value; 
       } 
      } 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(options.data); 
      }, 
      destroy: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 
      for(var i=0; i<localData.length; i++){ 
       if(localData[i].ID === options.data.ID){ 
        localData.splice(i,1); 
        break; 
       } 
      } 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(localData); 
      }, 
     }