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

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

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

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

Для загрузки динамических данных в Kendo UI Grid я использую следующий код: (Пример JsFidlle)

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}]);

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

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

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


kendo-grid kendo-ui kendo-datasource
person Yordan Asenov    schedule 24.06.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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'));
}
person Frederic    schedule 25.06.2015

arrow_upward
0
arrow_downward

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

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

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

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) В конце я создаю новую сетку Kendo 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);
person Yordan Asenov    schedule 25.06.2015