Kendo DataSource, AngularJS - неопределенное свойство

Я хочу заполнить сетку сложным json, возвращаемым из веб-сервиса. Мой JSON содержит две вещи:

  • data: массив с записями, которые будут заполнять сетку
  • колонки: массив с конфигурацией (компоновкой) сетки

Я успешно заполнил сетку "данными", указав schema.data.

Моя проблема с сеткой конфигурации (макет). Я получаю массив столбцов на requestEnd событие источника данных, и я добавляю его в customersSource (источник данных), поэтому я могу получить к нему доступ в gridOptions.

Проблема в том, что даже когда я регистрирую customersSource объект, который я вижу, что массив cols, который я добавил, там и заполнен соответствующими данными $scope.mainGridOptions.columns не установлен в customersSource.cols,

Я думаю, что это может быть связано с тем, что customersSource.cols устанавливается асинхронно, но разве не следует позаботиться об этом с помощью привязки данных?

Также я прочитал в источнике данных против Angular, что мне, возможно, придется установить что-то как наблюдаемое, но я не понимаю, что делать именно.

Как я могу это исправить?

Вот мой код:

var customersSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://....",
                dataType: "json"
            }
        },
        schema: {
            data: "data"
        },
        requestEnd: function (e) {
            this.cols = e.response.columns;
        }
    });

$scope.mainGridOptions = {
        dataSource: customersSource, // OK
        columns: customersDataSource.cols, // undefined - uses default
        height: 500,
        scrollable: true,
        selectable: true
    };

Вот мой JSON

{
  "data": [
    {
      "id": 0,
      "firstname": "Dalton",
      "lastname": "Holden",
      "gender": "male",
      "email": "daltonholden@tellifly.com",
      "phone": "871-407-2973",
      "address": "22 National Drive, Brenton, Louisiana",
      "birthday": "21/04/1965",
      "currency": "GBP"
    },
    {
      "id": 1,
      "firstname": "Allyson",
      "lastname": "Odom",
      "gender": "female",
      "email": "allysonodom@tellifly.com",
      "phone": "922-548-2725",
      "address": "44 Quincy Street, Thynedale, Georgia",
      "birthday": "28/08/1961",
      "currency": "CHF"
    },
    {
      "id": 2,
      "firstname": "Sweet",
      "lastname": "Branch",
      "gender": "male",
      "email": "sweetbranch@tellifly.com",
      "phone": "880-593-2244",
      "address": "81 Fenimore Street, Veguita, Missouri",
      "birthday": "08/08/1953",
      "currency": "AUD"
    }
  ],

  "columns": [
    {
      "field": "firstname",
      "title": "Frist Name",
      "width": 200,
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "lastname",
      "title": "Last Name",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "gender",
      "title": "Gender",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "email",
      "title": "e-mail",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "phone",
      "title": "Phone Number",
      "attributes": {
        "class": "",
        "style": "text-align: right;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: right;"
      }
    },
    {
      "field": "address",
      "title": "Address",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "birthday",
      "title": "Birthday",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    },
    {
      "field": "currency",
      "title": "Currency",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    }
  ]
}

Редактировать Я создал плункер моего тестового проекта. Как вы можете видеть, я могу заполнить сетку, но у меня есть проблема с mainGridOptions.columns. Любая помощь будет высоко ценится! http://plnkr.co/edit/5pjFQGkgTivqVkxsFBse

1 ответ

Это потому, что angularjs не знает об изменениях, внесенных сторонними разработчиками, и вам не хватает волшебной двусторонней привязки данных. хотя я думаю, что обещания будут работать отлично в вашем случае

requestEnd: function (e) {
  $scope.$apply(function(){
    $scope.mainGridOptions.columns = e.response.columns
  })
}
Другие вопросы по тегам