Как вставить выпадающий список кендо в сетку кендо, но с другим источником данных? - PullRequest
Новая
       65

Как вставить выпадающий список кендо в сетку кендо, но с другим источником данных?

1 голос
/ 28 мая 2020

Я создал сетку кендо, и мне нужно вставить выпадающий список кендо в одну из колонок. Мне нужно получить данные для раскрывающегося списка из другого источника данных. Это вроде работает, однако проблема в том, что когда я выбрал значение из раскрывающегося списка, и раскрывающийся список закрывается, вместо того, чтобы отображать это значение, он переходит в редактируемый режим. Только когда я щелкаю за пределами раскрывающегося списка, отображается правильное значение. Вот гифка проблемы:

https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif

Как можно решить эту проблему?

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

  title: "Type",
  field: "productType.name", //this property is from the data source used for grid
  template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\" 
    k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\" 
    ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];

$scope.productTypes = {
  data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}

$scope.productTypeDataSource = new kendo.data.DataSource({
  schema: {
    data: "data",
    model: {
      fields: {
      id: { type: "number" },
      name: { type: "string" }
      }
    }
  },
  data: $scope.productTypes,
  serverPaging: true,
  serverSorting: true,
  serverFiltering: true
});

$scope.productTypeOptions = {
  dataSource: $scope.productTypeDataSource,
  dataTextField: "name",
  dataValueField: "id"
};

$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
  var index = dataSource.indexOf(dataItem);
  var c = productArray.data[index];
  if (c == null) return;
  c[field] = dataItem[field];
  return c;
};

$scope.productTypeChanged = function (dataItem, field) {
  $scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```
...