Проблемы с редактированием сетки пользовательского интерфейса Kendo

Question

Я попытался использовать сетку Kendo, и я нашел некоторые проблемы.

Действие кнопки «редактировать» и «удалять» ничего не делает, когда я нажимаю, но если я поставлю команду «создать» в транспорт, сетка отправит много POSTS для команды создания URL-адреса, когда я нажму кнопку «Удалить» или « нажмите в edit> cancel (кнопка обновления ничего не делает).

Что я делаю неправильно?

Мой код:

<div id="grid"></div> 
<script type="text/x-kendo-template" id="template"> 
    <div class="toolbar">  
    <input type="number" min="0" id="item-id" maxlength="10" /> 
    <input type="text" id="name" class="k-textbox" placeholder="..." /> 
    <button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button> 
</div> 
</script> 

<script> 
    $(document).ready(function() { 

     var dataSource = new kendo.data.DataSource(
     { 
      schema: 
      { 
       data: "data", 
       total: "total", 
       model: 
       { 
        id: "data", 
        fields: 
        { 
         id: { editable: false, nullable: false }, 
         nome: { type: "string", validation: { required: true} }, 
         ativo: { type: "boolean" } 
        } 
       } 
      },     
      transport: 
      { 
       read: 
       { 
        url: "page", 
        dataType: "json", 
        type: "POST", 
        data: additionalData 
       }, 
       update: { 
        url: "update", 
        dataType: "jsonp" 
       }, 
       destroy: { 
        url: "delete", 
        dataType: "jsonp" 
       } 
       /*, 
       create: { 
        url: "add", 
        dataType: "jsonp"     
       } 
       */ 
      }, 
      pageSize: 5, 
      serverSorting: true, 
      serverPaging: true, 
     }); 

     var grid = $("#grid").kendoGrid({ 
      dataSource: dataSource, 
      sortable: true, 
      pageable: { 
       input: true, 
       numeric: false 
      }, 
      batch: true, 
      columns: [ 
       { field: "id", title: "#", width: "60px" }, 
       { field: "nome", title: "Nome" }, 
       { field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" }, 
       { command: ["edit", "destroy"], title: "Ações", width: "200px" } 
      ], 
      editable: "inline", 
      toolbar: kendo.template($("#template").html()),    
     }); 

     kendo.bind($(".toolbar")); 

     $("#id").kendoNumericTextBox({ 
      format: "##########", 
      placeholder: "..." 
     }); 

     $("#btn-grid-filtrar").click(function() { 
      grid.data("kendoGrid").dataSource.read(); 
     }); 
    }); 

    function additionalData() { 
     return { 
      filtro_id: $("#item-id").val(), 
      filtro_nome: $("#name").val() 
     }; 
    } 

</script> 

Answer 1

Прежде всего, я предполагаю, что вы сервер обслуживает JSON в следующем формате:

{ 
    "total": 2, 
    "data" : [ 
     { 
      "data" : 23, 
      "id" : 1, 
      "ativo": true, 
      "nome" : "stock-1" 
     }, 
     { 
      "data" : 34, 
      "id" : 2, 
      "ativo": false, 
      "nome" : "stock-2" 
     } 
    ] 
} 

Правильно?

Итак, первое, что нужно изменить «данные» в каждой строке data на то, что не называется data. Оказывается, что data является своего рода-заповедного слова в KendoUI обычно используется в кодовых структур как:

with (data) { 
    // Expanded code coming from a grid row data 
} 

Где это data переменная ссылается на строку в сетке. Итак, в этом контексте data - это и сама строка, и поле в этой строке, а затем JavaScript не может ее правильно решить.

Таким образом, вы можете определить схему как:

schema  : { 
    data : "data", 
    total: "total", 
    model: { 
     id : "_data", 
     fields: { 
      id : { editable: false, nullable: false }, 
      nome : { type: "string", validation: { required: true} }, 
      ativo: { type: "boolean" } 
     } 
    } 
}, 

ПРИМЕЧАНИЕ: Я заменить data на _data.

Переданные данные:

{ 
    "total": 2, 
    "data" : [ 
     { 
      "_data" : 23, 
      "id" : 1, 
      "ativo": true, 
      "nome" : "stock-1" 
     }, 
     { 
      "_data" : 34, 
      "id" : 2, 
      "ativo": false, 
      "nome" : "stock-2" 
     } 
    ] 
} 

Просто с этим небольшим изменением ваша кнопка Edit начнет работать.

Answer 2

Вы не должны определить транспортный уровень для локальных источников данных, если правильно понимают ваш код, вы не сможет разместить в любом месте - вы не являетесь обязательными для любых удаленных данных, я не могу см. любой URL-адрес? Следуйте этому примеру http://demos.kendoui.com/web/datasource/index.html.