Data Rows

• What will happen if array of rows is not consistent?
• How to setup rows using q-grid model?
• How to enable row resizing and drag & drop?

Any array of objects can be directly bind to the q-grid, if observable is used just add async pipe.

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async"
              [model]="gridModel">
      </q-grid>
      `
})
export class MyComponent {
   rows$ = this.dataService.getRows();

   gridModel = this.qgrid
      .model();
      .columnList({ 
         generation: 'deep' 
      });

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }
}

What will happen if array of rows is not consistent?

If some of the row fields are setup incorrectly - empty cells will be shown.

When edit such a value, an error will be thrown.

How to setup rows using q-grid model?

Almost all features and possibilities of the q-grid are accessible through the q-grid model, typically data comes from the observable so rows$ | async pattern looks elegant, when you already have an array of objects consider to put them to the model directly.

qgrid
   .model()
   .data({
      rows: [
         { name: 'Alex', age: 16 }, 
         { name: 'Bill', age: 40 }
      ]
   });

How to enable row resizing and drag & drop?

By setting up canMove and canResize inputs in the q-grid-row component or by using row state in the q-grid model.

qgrid
   .model()
   .row({
      canResize: true,
      canMove: true,
   });