Kendo Angular Grid Paging bringing back all records instead of subset of records

I have a kendo angular grid being populated by an oracle database. I can not get the paging to work properly. it is my expectation that if i have the paging set to 50 records that I should only gather the first 50 records even if there are 400 records. however, i am getting all 400 records but I am only displaying 50 records. so again, my understanding is that the dataset should only return 'x' number of records depending on the page setting. I should have the relevant code below. Am I wrong in my assumption? If not, how do i fix this because currently it returns all 400 records at once but only displays 50/page in the grid.

Thanks for your help.

CONTROLLER

[HttpGet("odata/GetEvents")]
//[ODataRoute("GetEvents")]
public async Task<IEnumerable<EventsGridModel>> GetEvents(
[FromODataUri] string sourcesystem,
[FromODataUri] string regionId = null,
[FromODataUri] string operatingAreaId = null,
[FromODataUri] string districtId = null,
[FromODataUri] string crewAreaId = null,
[FromODataUri] string substationId = null,
[FromODataUri] string circuitId = null,
[FromODataUri] string status = null,
[FromODataUri] string eventType = null,
[FromODataUri] string startDate = null,
[FromODataUri] string endDate = null,
[FromODataUri] string eventIdx = null,
[FromODataUri] string relEventIdx = null,
[FromODataUri] string eventOwner = null
)
{
return await Business.GetEvents(sourcesystem, regionId, operatingAreaId, districtId, crewAreaId, substationId, circuitId, status, eventType, startDate, endDate, eventIdx, relEventIdx, eventOwner).ToListAsync();
}


BUSINESS

public IQueryable<EventsGridModel> GetEvents(
string sourcesystem,
string regionId,
string operatingAreaId,
string districtId,
string crewAreaId,
string substationId,
string circuitId,
string status,
string eventType,
string startDate,
string endDate,
string eventIdx,
string relEventIdx,
string eventOwner
)
{

var dataSet = Ctx.Set<EventsGridModel>().FromSqlRaw($@"
SELECT
EVENTIDX AS ID,
PROJECTID,
EVENTIDX,
STATUS,
EVENTOWNER,
DEVICE,
CUSTOMERSORIG,
CUSTAFFECT,
DURATION,
CMI,
SAIFI,
CAIDI,
LOCKOUT,
NUMBEROFCALLS,
CREATIONTIME,
RESTTIMEOFF,
NOMINALSUBNAME,
NOMINALFEEDNAME,
WORKINGSUBNAME,
WORKINGFEEDNAME,
EVENTREVFLAG
FROM TABLE
(
OBVWH.NMS_PKG_REVIEW_APPROVE.GET_RA_EVENT_LIST
(
'{sourcesystem}',
'{regionId}',
'{operatingAreaId}',
'{districtId}',
'{crewAreaId}',
'{substationId}',
'{circuitId}',
'{status}',
'{eventType}',
'{startDate}',
'{endDate}',
'{eventIdx}',
'{relEventIdx}',
'{eventOwner}'
)
);");

return dataSet.AsQueryable();
}


GRID.COMPONENT.TS

protected triggerGridQuery(): void {
this.gridData.query<Events>(
`GetEvents?Sourcesystem=${this.SourceSystemId}&RegionId='${regId}'&OperatingAreaId='${opAreaId}'&DistrictId='${districtId}'&CrewAreaId='${crewAreaId}'&SubstationId='${substationId}'&CircuitId='${circuitId}'&Status='${eventStatusVal}'&EventType='${eventTypeVal}'&StartDate='${eventStart}'&EndDate='${eventEnd}'&EventIdx='${eventIdx}'&RelEventIdx='${eventRelEventIdx}'&EventOwner='${eventOwner}'`,
Object.assign({}, this.state),
{}
);
}


GRID-DATA.SERVICE.TS

import { Injectable } from '@angular/core';

import {
DataResult,
GroupDescriptor,
process,
SortDescriptor,
State,
toODataString,
} from '@progress/kendo-data-query';

import { BehaviorSubject, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

import { CoreModule } from '../core.module';
import { BaseDataService } from './base-data.service';

export interface ExtraODataQueryProps {
selects?: string;
expands?: string;
extraProps?: string;
}

@Injectable({
providedIn: CoreModule,
})
export class GridDataService extends BehaviorSubject<DataResult> {
isLoading = false;
isExporting = false;

constructor(protected dataService: BaseDataService) {
super({ data: [], total: 0 });
}

exportAll(
endpoint: string,
state: State,
queryProps?: ExtraODataQueryProps
): Observable<DataResult> {
this.isExporting = true;
const queryState = Object.assign({}, state);
delete queryState.skip;
delete queryState.take;
return this.prepFetch(endpoint, queryState, queryProps);
}

/**
* Query data for a kendo grid via a OData GET call
* @param {string} endpoint OData controller name to call
* @param {State} state state to serialize into OData query
* @param {ExtraODataQueryProps} queryProps additional OData query parameters to send, will be put in format $select=...
*/
query<T>(endpoint: string, state: State, queryProps?: ExtraODataQueryProps): void {
super.next({ data: [], total: 0 });
this.isLoading = true;
this.prepFetch<T>(endpoint, state, queryProps).subscribe((x) => super.next(x));
}

queryAll<T>(
endpoint: string,
state: State,
queryProps?: ExtraODataQueryProps
): Observable<DataResult> {
this.isExporting = true;
const queryState: State = Object.assign({}, state);
delete queryState.skip;
delete queryState.take;
return this.prepFetch<T>(endpoint, queryState, queryProps);
}

protected fetch<T>(
endpoint: string,
queryString: string,
group?: GroupDescriptor[]
): Observable<DataResult> {
const applyGrouping = group && group.length > 0;

return this.dataService.get<T>(endpoint, queryString).pipe(
map((response) => {
if (response.body === null) {
return <DataResult>{ data: [], total: 0 };
}

console.log(response.body.value.length);
if (applyGrouping) {
const grouped = process(response.body.value, {
group: group,
});
grouped.total = parseInt(response.body['@odata.count'], 10);
return grouped;
}
return <DataResult>{
data: response.body.value,
total: response.body.value.length, //parseInt(response.body['@odata.count'], 10),
};
}),
tap(() => {
this.isLoading = false;
this.isExporting = false;
})
);
}

private prepFetch<T>(
endpoint: string,
state: State,
queryProps?: ExtraODataQueryProps
): Observable<DataResult> {
if (state.group && state.group.length > 0) {
state.sort = state.group.map(
(group) => <SortDescriptor>{ field: group.field, dir: group.dir || 'asc' }
);
}

let extraquery = '';
if (queryProps) {
extraquery =
(queryProps.selects ? `&$select=${queryProps.selects}` : '') +
(queryProps.expands ? `&$expand=${queryProps.expands}` : '') +
(queryProps.extraProps ? `${queryProps.extraProps}` : '');
}

this.setCaseInsensitiveSearch(state.filter);

const queryString = `${extraquery}${toODataString(state, { utcDates: true })}&$count=true`;
return this.fetch<T>(endpoint, queryString, state.group);
}

private setCaseInsensitiveSearch(object: any) {
//This is commented because the DBContext sets it's collation to case insensitive, but this is
//preserved in commented form for a backup solution:
// //recursively traverse the filter object in state
for (var property in object) {
if (object.hasOwnProperty(property)) {
//If this property of the object is also an object make a recursive call
if (typeof object[property] == 'object') {
this.setCaseInsensitiveSearch(object[property]);
} else {
//found a property which is not an object, check if this is a value inside a filter
if (property === 'value' && typeof object[property] === 'string') {
object[property] = object[property].toLowerCase();
//Add ignoreCase: true to this object
object.ignoreCase = true;
}
}
}
}
}
}

Continue reading...