Кнопки командной строки Kendo Grid

Question

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

Если я правильно читать документы, это то, что я должен делать:

vm.masterGrid.dataSource = new kendo.data.DataSource({ 
    transport:{ 
     destroy: function(e) { 
      console.log(e); 
      vm.removePackages(e.data); 
     }, 
    } 
}); 

vm.masterGrid.gridOptions = { 
    columns: [ 
     { command: "destroy", title: "Remove" }, 
    ], 

Он никогда не попадает в console.log

Вот пример команды уничтожения:

http://demos.telerik.com/kendo-ui/grid/editing (1/3 вниз страницы Редактировать этот пример] не может связать непосредственно к коду по какой-то причине)

Я могу полностью удалить транспорт, он не имеет никакого эффекта; удаление все равно.

destroy: { 
    url: crudServiceBaseUrl + "/Products/Destroy", 
    dataType: "jsonp" 
}, 

Так что, я думаю, это происходит по волшебству. Магия, которую я не могу воспроизвести в своем собственном коде.

Answer 1

Во-первых, в приведенной ниже демонстрационной версии, если вы удалите конфигурацию transport.destroy, строка будет по-прежнему удаляться из сетки при нажатии кнопки «Удалить». Transport.destroy не вызывается до тех пор, пока вы не сохраните изменения. Когда вы нажмете «Сохранить изменения», а затем обновите страницу/сетку, вы обнаружите, что строка не была удалена в фоновом режиме. Если вы оставите конфигурацию destroy на месте, строка исчезнет на странице обновления.

Во-вторых, в зависимости от того, как вы настроили другие транспортные конфиги, что вы не показали (чтение, обновление, создание), этот бит документированной функциональности может быть проблема (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.destroy)

Весь транспорт действия (чтение, обновление, создание, уничтожение) должны быть определены таким же образом, например как функции или как объекты. Смешивание различных вариантов конфигурации невозможно.

Я бы предположил, что у вас есть какой-то транспорт в качестве объектов (возможно, прочитанный), а когда разрушение является функцией, возможно, это просто просто не работает ... придется пройти через код кендо, чтобы знать конечно.

Answer 2

Если вы хотите написать свой собственный код удаления, просто добавьте эту строку в код сетки.

remove: function(e){ 
    debugger; 
    console.log("Debugger Hits :)"); 
} 

Просто измените выше данную ссылку и изменить это:

$("#grid").kendoGrid({ 
         dataSource: dataSource, 
         navigatable: true, 
         pageable: true, 
         height: 550, 
         remove: function(e){ 
          debugger; 
          console.log("Debugger Hits :)"); 
         }, 
         toolbar: ["create", "save", "cancel"], 
         columns: [ 
          "ProductName", 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 }, 
          { field: "UnitsInStock", title: "Units In Stock", width: 120 }, 
          { field: "Discontinued", width: 120 }, 
          { command: "destroy", title: " ", width: 150 }], 
         editable: true 
        }); 

---

Или, вместо использования по умолчанию кендо в Кнопку удалить, почему бы вам не использовать свой собственный Удалить кнопку Like This ?

$("#grid").kendoGrid({ 
         dataSource: dataSource, 
         navigatable: true, 
         pageable: true, 
         height: 550,       
         toolbar: ["create", "save", "cancel"], 
         columns: [ 
          "ProductName", 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 }, 
          { field: "UnitsInStock", title: "Units In Stock", width: 120 }, 
          { field: "Discontinued", width: 120 }, 
          { title: "&nbsp;", template: "<button onClick='customEditor()'>Custom Delete Button</button>", width: 150 }], 
         editable: true 
        }); 
       }); 

       function customEditor(){ 
       debugger; 
       console.log("Yes, I Am Custom Delete Button"); 
       } 

Надеюсь, он сработает для вас.