Как захватить событие уничтожения в сетках пользовательского интерфейса кендо, когда сделан щелчок?

Я хочу выполнить действие, когда выполняется событие нажатия кнопки удаления в сетке. Как я могу узнать, когда щелкнули в Javascript?


javascript jquery kendo-grid kendo-ui
person vicenrele    schedule 25.01.2013    source источник

Ответы (2)


arrow_upward
15
arrow_downward

(Прочитайте ВАЖНО в конце)

Использовать:

$("tr .k-grid-delete", "#grid").on("click", function(e) {
    alert("deleted pressed!");
})

Где #grid — идентификатор вашей сетки.

Если вы хотите узнать элемент данных, который вы можете сделать:

var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));

В качестве альтернативы вы можете определить command в grid.columns как:

{
    command: [
        "edit",
        {
            name : "destroy",
            text : "remove",
            click: myFunction
        }
    ],
    title  : "Commands",
    width  : "210px" 
}

где myFunction это:

function myFunction(e) {
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
}

ВАЖНО: вы можете определить свою собственную кнопку destroy, в которой только стиль копируется из исходной кнопки (никаких других действий/проверок). Если это так, определите свой grid.columns.command как:

{
    command: [
        "edit",
        {
            name     : "destroy",
            text     : "remove",
            className: "ob-delete"
        }
    ],
    title  : " ",
    width  : "210px"
}

а затем определить:

$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
    e.preventDefault();
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
    ...
    // If I want to remove the row...
    $("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});
person OnaBai    schedule 25.01.2013
comment
Как я могу получить данные строки для удаления из базы данных при выполнении события щелчка? - person vicenrele; 25.01.2013
comment
Оно делает! Какую версию Kendo UI вы используете? - person OnaBai; 25.01.2013
comment
Я использую v2012.3.1315. В grid.columns у меня { command: "destroy", title: " ", width: "110px" }, если добавить ваш код: [ "edit", { name : "destroy", text : "remove", click: myFunction } ] не работает - person vicenrele; 25.01.2013
comment
да. Это массив кнопок. В примере я поставил редактирование и уничтожение. - person OnaBai; 25.01.2013
comment
Как удалить только одну строку? - person vicenrele; 26.01.2013
comment
Работает только с jQuery +1.83, а не с v2012.3.1315, которую я использую. Я мог бы использовать v2012.3.1114 kendoui - person vicenrele; 26.01.2013
comment
здесь с jQuery 1.7.2 и KendoUI v2012.3.1114. Но это правда, что это не работает с v2012.3.1315. Позвольте мне посмотреть, смогу ли я заставить свою скрипку работать с v2012.3.1315. - person OnaBai; 26.01.2013
comment
Ok! Здесь (jsfiddle.net/OnaBai/8Nq8X/4) работа с v2012.3.1315 и jQuery 1,83. Мне пришлось изменить настройку событий live. Здесь (jsfiddle.net/OnaBai/8Nq8X/3) то же самое с jQuery 1.72. - person OnaBai; 26.01.2013
comment
Знаете ли вы, почему функция удаления не работает на мобильных устройствах? иногда работает но не всегда - person vicenrele; 30.01.2013
comment
Привет. Я связываюсь с вами, потому что у меня есть вопрос о вашем примере. Если я добавлю содержимое сетки с помощью backbone.js (фреймворк для создания одностраничных приложений), событие click не будет работать на мобильных устройствах. Ты знаешь почему? [пример](jsfiddle.net/vicenrele/Thxtr/48) - person vicenrele; 12.02.2013
comment
Ok. Спасибо. Это моя версия Android. Но у меня есть еще один вопрос о вашем примере: здесь . С уважением - person vicenrele; 15.02.2013

arrow_upward
10
arrow_downward

просто. Вы можете использовать remove: для захвата события уничтожения в кендо.

$('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: ' ', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
          //Do your logic here before save the record.
        },       
        remove:function(e){ 
          alert("delete event captured");
          //Do your logic here before delete the record.
        }
    });


$(document).ready(function() {  
    var gridDataSource = new kendo.data.DataSource({
        data: [
            { id: 1, description: 'Test 1', begin: new Date() }
        ],
        schema: {
            model: {
                id: 'id',
                fields: {
                    id: { type: 'number' },
                    description: { type: 'string' },
                    begin: { type: 'date' }
                }
            }
        }
    });

    $('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: ' ', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
        },       
        remove:function(e){
          alert("delete event captured");
        }
    });
      });
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="grid"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

person ManirajSS    schedule 08.11.2014
comment
если вам нужно восстановить удаленную строку, используйте это: $(#grid).data(kendoGrid).cancelChanges(); - person uowzd01; 19.08.2015