[Solved] Possible pageSize bug with kendo angular grid and ObservableArray

[JSON]

I'm using a kendo angular grid on a page. The config is this:

$scope.gridData = new kendo.data.ObservableArray($scope.rowData);
          $scope.gridOptions = {
                    columns: [{
                        field: "itemType",
                        title: '<i class=\'fa fa-file-o\'></i>',
                        sortable: false,
                        width: 40
                    },{
                        field: "displayName",
                        title: "Name"
                    }, {
                        field: "owner",
                        title: "Owner"
                    }, {
                        field: "tags",
                        title: "Tags",
                        sortable: {
                            compare: function(data) {
                                return _.filter(data.tags, function(tagObj) {
                                    return (tagObj.state === 'Accepted' || tagObj.state === 'Suggested');
                                }).length;
                            }
                        }
                    }, {
                        field: "fileType",
                        title: "Content Type"
                    }, {
                        field: "size",
                        title: "Size",
                        width: 70
                    }, {
                        field: "lastModificationTime",
                        title: "Last Modified"
                    }],
                    sortable: {
                        mode: "single",
                        allowUnsort: false
                    },
                    columnMenu: true,
                    reorderable: true,
                    resizable: true,
                    selectable: "row",
                    pageable: {
                        pageSize: 25,
                        pageSizes: [25, 50, 100],
                        previousNext: true
                    },
                    rowTemplate: kendo.template($("#browseListGrid").html()),
                    dataSource: $scope.gridData
                };


So if I use this config to generate a grid, the pageSize defaults to the length of the $scope.gridData. If I use $scope.rowData as the dataSource, the pageSize actually works. I have absolutely no idea why this is the way it is...my understanding is that it should work with the array wrapped with ObservableArray. I have reproduced it in the following:

http://dojo.telerik.com/@yazdog8/IlEF

[Kiril Nikolov]

Hello Joe,

The grid is configured to check if the passed data is a simple array, and then set the data directly, but does not check for the observableArray option. This is why you will need to pass the observableArray to the data property of the DataSource, as in this updated example:

http://dojo.telerik.com/UXIL

Regards,
Kiril Nikolov
Telerik

 

 

[JSON]

That solved the problem, thanks.