Добавить пользовательскую команду в Kendo UI динамический источник данных/сетку

Question

Я использую javascript-структуру Kendo UI в приложении ASP.NET MVC.

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

Пример моих данных:
PersonID, Data1, Data2, Date3 ...

Для загрузки динамических данных в Кендо UI Сетка Я использую следующий код: (JsFidlle Example)

var grid = $("#grid").kendoGrid({ 
    scrollable: false, 
    sortable: true 
}).data("kendoGrid"); 

var ds = grid.dataSource; 
grid.columns = [];  
ds.data([{one: 1, two: 1, three: 3, four: 4}]); 

Starting из этого примера мне любопытно узнать, могу ли с помощью этого управления добавить в каждую строку команду/пользовательскую команду, например «Удалить». (Example)

В конце концов, как я могу справиться с поведением командования? (Было бы хорошо, чтобы увидеть окно подтверждения после щелчка по команде)

Спасибо за внимание!

Answer 1

Я решил с этим решением: https://jsfiddle.net/Endrik/smLfh67e/1/

Это очень похоже на решение Фредерика, но с некоторыми изменениями.

1) Я начинаю с объектом источника данных, потому что я буду получать мои данные от удаленного
Если изменить тип загрузки данных в объекте DataSource, пример должен работать одинаково.

var myDataSource = new kendo.data.DataSource({ 
    data: [{ 
      one: "1", 
      two: "2", 
      three: "3", 
      four: "4" 
     }, { 
      one: "5", 
      two: "6", 
      three: "7", 
      four: "8" 
     }] 
    }); 

    myDataSource.fetch(); 

2) Для того, чтобы иметь динамические столбцы, я должен преобразовать данные, присутствующие в моем объекте источника данных в массив значений. (Коллекции, как Фредерика запуска объектов)

var myDataSourceRowsNumber = myDataSource.total(); 

var rows = []; 
var columns = null; 
var columnsCount = 0; 

for (var i = 0; i < myDataSourceRowsNumber; i++) { 
    var entryArray = []; 
    var dataItem = myDataSource.at(i); 

    columns = []; 

    for (var field in dataItem) { 
     if (dataItem.hasOwnProperty(field) && 
      field != 'parent' && 
      field != 'uid' && 
      field != '_events') { 

      columns.push({ 
       field: field, 
       value: dataItem[field.toString()] 
      }); 
     } 
    } 

    columnsCount = columns.length; 
    for (var j = 0; j < columnsCount; j++) { 
     entryArray.push(dataItem[columns[j].field]); 
    } 

    rows.push(kendo.observable({ 
     entries: entryArray 
    })); 
} 

var viewModel = kendo.observable({ 
    gridRows: rows 
}); 

3) В конце концов, я создаю новую сетку Кендо UI с моим определением столбцов.

var finalColumns = []; 
for (var k = 0; k <= columnsCount; k++) { 
    var entryIndex = "entries[" + k + "]"; 
    if (k != columnsCount) { 
     finalColumns.push({ 
      field: entryIndex, 
      title: columns[k].field 
     }); 
    } else { 
     finalColumns.push({ 
      command: [{ 
       name: "CustomDelete", 
       text: "Delete", 
       className: "custom-delete-btn ", 
       imageClass: "k-icon k-i-close", 
       click: ManageDeleteButtonClick 
      }], 
      title: "Actions" 
     }); 
    } 
} 

var configuration = { 
    editable: true, 
    sortable: true, 
    scrollable: false, 
    columns: finalColumns 
}; 

function ManageDeleteButtonClick(e) { 
    e.preventDefault(); 
    var dataItem = this.dataItem($(e.target).closest("tr")); 
    if (confirm('Are you sure you want to delete this record ?')) { 
     // AJAX CALL 
     var dataSource = $("#grid").data("kendoGrid").dataSource; 
     dataSource.remove(dataItem); 
    } 
} 

var myGrid = $("#grid").kendoGrid(configuration).data("kendoGrid"); 
kendo.bind($('#example'), viewModel); 

Answer 2

Получить данные первой, затем создать массив для столбцов сетки на основе данных и добавить колонку для кнопок.

Создать сетку и прикрепить обработчик к каждой кнопке.

http://jsfiddle.net/cp67fpw1/2/

Создание сетки:

var columns = [], 
    data = [{ 
     one: 1, 
     two: 1, 
     three: 3, 
     four: 4, 
     five: 5 
    }], 
    grid; 

for (var cx in data[0]) { 
    if (data[0].hasOwnProperty(cx)) { 
     columns.push({ 
      field: cx 
     }) 
    } 
} 

columns.push({ 
    field: '', 
    template: '<a class="k-button" command="doit">do it</a><a class="k-button" command="doitagain">do it again</a>' 
}); 

grid = $("#grid").kendoGrid({ 
    columns: columns, 
    dataSource: new kendo.data.DataSource({ 
     data: data 
    }), 
    scrollable: false, 
    sortable: true 
}).data("kendoGrid"); 

Добавление обработчика кнопки:

$('#grid').on('click', '[command="doit"]', doit); 

function doit(e) { 
    var dataItem = grid.dataSource.getByUid($(this).closest('tr').data('uid')); 
}