Kendo multiselect使用带分页的odata填充以前选择的项目。 （AngularJS）

Question

我使用带有odata分页的kendo MultiSelect并使用angularJS集成。从头开始填充数据非常有用。当我想从初始数据重新填充数据时，我似乎遇到了问题。

问题原因： 数据仅从初始或以前的数据集中填充。因此，如果我的分页大小为10，那么只有第一页中存在的产品才会正常显示。所有不属于第一页的产品都不会显示。

可能的解决方法：

1. 增加页面大小。我在其他结果非常小的页面上使用过它。然而，这不是一个现实的工作，因为我们期待未来更大的数据集（因此首先使用odata）。
2. 我们以为我们可以做一些初步排序。但是，如果选择的项目多于第一页中存在的项目，那么这也可能很慢并且仍然可能存在问题。

理想的解决方案

有没有办法让kendo组件根据当前值加载所有数据？然后，这将构建所需的odata调用并填充组件。

当前问题的示例： http://dojo.telerik.com/ODaLe/2

Answer 1

当使用带有Angular的Kendo时，您希望使用k-rebind属性刷新下拉选项+更改选择器时更改的$ scope.countries对象中的值。

如果您希望在$ scope.products更改时更新选择器，您可以使用指向控制器中对象的k-options attr初始化选择器，并将k-rebind设置为该对象。 / p>

这个kendo教程提供了一个有用的例子，也使用了odata分页。 http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items

Answer 2

我工作了2-4个小时才找到解决方案。 Dunno，如果你想要它，但它可能会帮助某人，所以我在这里输入它。以下是步骤：

第1步：创建数据源

首先，设置您将用于读取远程数据的 dataSource 对象（用于离线数据，通过阅读API进行即兴创作）。

var dataSource = new kendo.data.DataSource({
  dataType: "jsonp",
  transport: {
    read: {
      url: options.source,
      type: 'POST'
    },
  },
  serverFiltering: true
});

第2步：加载所选项目

这可能很棘手，因为您需要在客户端获得所选的项ID。对我来说，我是通过在我的 select 元素中添加 data-options-selected =＆＃34; 1; 3; 9＆＃34; 属性来实现的。稍后，在我的JavaScript中，我将此属性拆分为＆＃34;;＆＃34;并检索所选ID的数组。假设这些值在 var valuesArray ;

中

一旦我们有一组选定的ID，我们需要从数据源中读取它们。在我的情况下，它是远程的，所以我使用过滤器运行 dataSource.read（），如下所示：

dataSource.read({
        filter: {
            logic: 'and',
            filters: [
                {
                    field: options.dataValueField,
                    operator: 'equals',
                    value: options.value
                }
            ]
        }
});

在服务器端，这应该返回一个包含具有给定标识符的项的数组。因此，我们现在也在客户端拥有这些项目。

第3步：设置小部件的值

现在已加载与值相关的数据，我们可以使用 values（）方法设置窗口小部件的值。这里，$ el是表示我用于 multiSelect 的select元素的jQuery对象。

var oWidget = $el.data('kendoMultiSelect'); oWidget.value(valuesArray);

那就是它！一个多选小部件预先加载了值，准备摇滚。服务于我的目的。 Dunno，如果有任何捷径存在。