How to enable paging on dx-select-box when using static array?

Question

I've got a dx-select-box in AngularJS that loads an array with around 3k rows, which makes performance very slow. I would like to enable paging, but I haven't found the way to do it. I've followed the documentation:

Array data binding doc: https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Data_Binding/Simple_Array/Array_Only/

Enable paging on select box:
https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Enable_Paging/

But no matter what I haven't been able to put the two of them together and get them working. I have also tried this solution with no luck.

Here's the HTML code:

<div id="stockShelfs" dx-select-box="vm.stockShelfsOptions"></div>

And here's the JS:

this.stockShelfsOptions = {
  valueExpr: 'stockShelfId',
  displayExpr: 'name',
  searchExpr: 'name',
  searchEnabled: true,
  acceptCustomValue: true,
  value: this.product.stockShelfId,
  placeholder: translate('POr_VelgStockShelf'),
  bindingOptions: {
      dataSource: 'vm.stockShelfs',
  },

Does anyone know how this could be achieved, if possible?

Answer 1

I got it working by getting rid of the bindingOptions config:

dataSource: new DevExpress.data.DataSource({
                store: new DevExpress.data.ArrayStore({
                    data: vm.stockShelfs,
                    key: "stockShelfId",
                    paginate: true,
                    pageSize: 1
                })
            }),

And then doing the two way binding inside the onCustomItemCreating function