OData not working and failing on 'statistics"

Hi there,

I did ask an exploratory question on pagination and the idea was to get OData working on the server and then use the OData example to send through fetch queries to populate the dataset however I am having trouble getting this to work correctly having got OData to work and send back OData responses from the server.

I am getting the error: Uncaught (in promise) TypeError: Cannot set property 'statistics' of undefined at AureliaSlickgridCustomElement.<anonymous> (aurelia-slickgrid.js:496) at step (aurelia-slickgrid.js:48) at Object.next (aurelia-slickgrid.js:29) at fulfilled (aurelia-slickgrid.js:20)

My code is as follows and is a simple 5 column grid using OData.

        import { Aurelia, PLATFORM, autoinject } from "aurelia-framework";
        import { Router } from "aurelia-router";
        import { HttpClient, json } from 'aurelia-fetch-client';
        import { EventAggregator } from 'aurelia-event-aggregator';
        import {
            AureliaGridInstance,
            Column,
            FieldType,
            Formatters,
            Filters,
            GridOdataService,
            GridOption,
            OperatorType,
            SortDirection,
            Statistic,
        } from 'aurelia-slickgrid';

        import { MessagePayload } from '../../../../services/messages/messages'
        import { AuthService } from '../../../../services/auth/auth-service'

        const defaultPageSize = 20;
        const sampleDataRoot = 'src/examples/slickgrid/sample-data';

        @autoinject()
        export class ClientList {
            title = 'Client List';
            subTitle = `
        Click on a client to examine and or edit.
        <br/>
        `;
            aureliaGrid: AureliaGridInstance;
            columnDefinitions: Column[];
            gridOptions: GridOption;
            dataset = [];
            statistics: Statistic;

            odataQuery = '';
            processing = false;
            status = { text: '', class: '' };

            constructor(
                private http: HttpClient,
                private authService: AuthService,
                private router: Router) {
                // define the grid options & columns and then create the grid itself
                this.defineGrid();
            }

            aureliaGridReady(aureliaGrid: AureliaGridInstance) {
                this.aureliaGrid = aureliaGrid;
            }

            defineGrid() {
                this.columnDefinitions = [
                    { id: 'clientNo', name: 'Client No.', field: 'clientNo', sortable: true, type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput } },
                    { id: 'company', name: 'Company', field: 'company', sortable: true, formatter: Formatters.checkmark },
                    { id: 'clientLastName', name: 'Last Name', field: 'clientLastName', sortable: true, type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput } },
                    { id: 'clientFirstName', name: 'First Name', field: 'clientFirstName' },
                    { id: 'mobilePhone', name: 'Mobile Ph.', field: 'mobilePhone', sortable: true, type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput } },


                ];

                this.gridOptions = {
                    enableAutoResize: true,
                    autoResize: {
                        containerId: 'demo-container',
                        sidePadding: 15
                    },
                    enableCellNavigation: true,
                    enableFiltering: true,
                    enableRowSelection: true,
                    pagination: {
                        pageSizes: [10, 20, 50, 100, 500],
                        pageSize: defaultPageSize,
                        totalItems: 0
                    },
                    presets: {
                        // you can also type operator as string, e.g.: operator: 'EQ'

                        sorters: [
                            // direction can be written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
                            { columnId: 'clientNo', direction: 'asc' },
                            { columnId: 'clientLastName', direction: 'asc' },
                            { columnId: 'mobilePhone', direction: 'asc' }
                        ],
                        pagination: { pageNumber: 1, pageSize: 10 }
                    },
                    backendServiceApi: {
                        service: new GridOdataService(),
                        preProcess: () => this.displaySpinner(true),
                        process: (query) => this.getCustomerApiCall(query),
                        postProcess: (response) => {
                            //console.log("RESPONSE: ", response);
                            //this.statistics = response.statistics;
                            this.displaySpinner(false);
                            this.getCustomerCallback(response);
                        }
                    }
                };
            }

            displaySpinner(isProcessing) {
                this.processing = isProcessing;
                this.status = (isProcessing)
                    ? { text: 'processing...', class: 'alert alert-danger' }
                    : { text: 'done', class: 'alert alert-success' };
            }

            getCustomerCallback(data) {
                // totalItems property needs to be filled for pagination to work correctly
                // however we need to force Aurelia to do a dirty check, doing a clone object will do just that
                console.log("...AND HERE!");
                this.gridOptions.pagination.totalItems = data['totalRecordCount'];
                this.gridOptions = { ...{}, ...this.gridOptions };
                if (this.statistics) {
                    this.statistics.totalItemCount = data['totalRecordCount'];
                }

                // once pagination totalItems is filled, we can update the dataset
                this.dataset = data['items'];
                this.odataQuery = data['query'];
            }

            getCustomerApiCall(odataQuery) {
                // in your case, you will call your WebAPI function (wich needs to return a Promise)
                // for the demo purpose, we will call a mock WebAPI function
                const headers = this.authService.header();

                return fetch(`/api/Client/Index?${odataQuery}`, {
                    method: "GET",
                    headers
                }).then(response => {
                    return response.json();
                });
            }
        }

For completeness here is the controller in the dotnet app:

   [HttpGet("Index", Name = "ClientIndex")]
   [EnableQuery()]
	public IEnumerable<Client> GetClients() {
		return _context.Clients;
	}

The dataset coming back from this is:

dataset:

I see that it is erroring on statistics as if the return set should have “totalRecordCount” and it doesnt so its identifying that as undefined I think…

I am not sure how to get this working once but if I can I believe I can use it throughout the app which is what I want to do…

So, what am I missing? Its using the query created by slickgrid etc…

[si2030]

I am really sorry regarding my question and the fact it was such a stupid error - i’d be frustrated. The last thing I want to do is cause people like you to allocate time you cant get back. That said I really want to use your work to decorate my project… Its excellent.

To this end I thought under the circumstances I would throw you a few coffees… as I am still struggling with this implementation as its failing on value converters now sadly… however once I have it working once I will be sorted across the whole project… again sorry to bother. 😉

PS whilst I want this project done its fine to leave me go a few days (fix the bugs) as I am it on the project and not relying on this for a job…

[ghiscoding]

Fixed now