Нокаут Kendo Grid dataBound события

у меня есть сетка Kendo ui с помощью нокаут-кендо set.

у меня есть несколько пользовательских кнопок в одном столбце сетки, т. е. сделать вызов ajax для редактирования записи в другом div, удалить один или проверить editId для вызова функции. Моя проблема в том, что оба события произвели в два раза! Кроме того, для меня это выглядит как dataBound событие и dataBinding событие-это то же самое.

Heres a скрипка

this.dataBound = function(){
    alert('dataBound');
};

this.dataBinding = function(){
    alert('dataBinding');
};

Я пробовал некоторые различных методов.

Возми скрипка

this.gridConfig = {
    data: self.myData,
    datasource: {
        data: 'data'
    },
    dataBound: function(){
        alert('dataBound');
    },
    dataBinding: function(){
        alert('dataBinding');
    },
};

события запускаются при привязке сетки и при привязке данных. Но как я могу быть уверен, чтобы получить только событие, когда все данные есть?

кто-нибудь знает, что там творится? Кстати, я использую плагин отображения.

6
javascript kendo-ui knockout-kendo knockout.js

2 ответов

на dataBound событие срабатывает по разным причинам. В первый раз он стреляет, если вы console.log() событие, вы увидите, что:

  • e.sender._data является пустым массивом []
  • e.element[0] is div.k-grid.k-widget

когда событие срабатывает во второй раз, те же свойства показывают как:

  • e.sender._data представляет собой массив длины три, содержащий такие элементы, как:{ color: "green", name: "apple", uid: "..." }
  • e.element[0] is div.k-grid.k-widget (же element)

что, похоже, означает, что ваша сетка фактически привязывает данные к себе дважды.

если бы я должен был догадаться, KO's ko.applyBindings(new ViewModel()); инициализирует объект и запускает событие. После этого событие запускается снова, когда kendo пытается связать данные элементов внутри.

чтобы избежать этого, см.: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

где вы могли бы использовать что-то подобное кому:

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBinding", grid_dataBinding);
grid.dataSource.fetch();

когда начальная привязка конфигурации установлена в autoBind: false

чтобы вы случайно не поймали это первым false событие dataBound.

если у меня будет время, я вернусь с JSFiddle, который демонстрирует это.

Решение 1: этой Скрипка должно помочь.

решение 2:

Set autoBind: false чтобы сетка не авто-привязку. (@jason9187)

как уже упоминалось другим пользователем, вы можете отключить начальную автоматическую привязку, изменив параметр, упомянутый в приведенной выше документации telerik:

в основном, это исправление в вашем первом подходе:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound }"></div>

будет:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound, autoBind: false }"></div>

или путем добавления того же свойства ко второму подходу.

Скрипка:http://jsfiddle.net/hXn7e/45/

7

Set autoBind: false чтобы сетка не привязывалась автоматически.

this.gridConfig = {
    data: self.myData,
    autoBind : false,
    datasource: {
        data: 'data'
    },
    dataBound: function(){
        alert('dataBound');
    },
    dataBinding: function(){
        alert('dataBinding');
    },
};
4