REST

Use REST plugin to connect q-grid with back-end directly.

Installation

Add angular component inside of q-grid component, after that q-grid will start using sorting, filtering and pagination from the rest service.

@Component({
   selector: 'my-component',
   template: `
      <q-grid>
         <q-grid-rest [url]="myServiceUrl" method="GET"></q-grid-rest>
      </q-grid>
   `
})
export class MyComponent {
   myServiceUrl = 'http://localhost:4000/exampleData'
}
POST Method

Next body is produced for filtering, sorting and pagination.

{
    filter: 'lastName=in:Doe,Jones;firstName=in:John,Harry',
    order: '+firstName,-lastName',
    skip: 100,
    take: 50
}
GET Method

Next url is produced for filtering, sorting and pagination.

?filter=lastName=in:Doe,Jones;firstName=in:John,Harry&order=+firstName,-lastName&skip=100&take=50

How to make a custom contract?

Override serialize method to change request output.

@Component({
   selector: 'my-component',
   template: `
     <q-grid [model]="gridModel">
       <q-grid-rest [url]="myServiceUrl" method="POST"></q-grid-rest>
     </q-grid>
   `
})
export class MyComponent implements AfterViewInit {
   gridModel = this.qgrid.model();
   myServiceUrl = 'http://localhost:4000/exampleData'

   constructor(private qgrid: Grid) {}

   ngAfterViewInit() {
      this.gridModel.rest({
        serialize: () => {
            const pagination = model.pagination();
            const sort = model.sort();
            const filter = model.filter();

            return {
               filter: filter.by,
               order: sort.by.map(s => {
                  const key = Object.keys(s)[0];
                  const value = s[key];
                  return (value === 'asc' ? '+' : '-') + key;
               }),
               skip: pagination.current * paginationState.size,
               take: pagination.size
            };
      });
   }
}
Suggested Links