Editing

There are situations when the end user need to edit data, in this case just setup edit mode equals to cell to turn on editing.

qgrid
   .model()
   .edit({
      mode: 'cell',
   });
How to access edit events in q-grid?

Edit model force to use commands to control editing.

qgrid
   .model()
   .edit({
      mode: 'cell',
      enter: new Command({
         canExecute: e => e.column.type === 'number'
      }),
      commit: new Command({
         execute: e => console.log(e.newValue)
      })
});
How to enable batch edit?

Use edit method property to activate batch editing, it activates cell handler that could be dragged to apply start cell value to the next selection.

qgrid
   .model()
   .edit({
      mode: 'cell',
      method: 'batch'
   });
How to disable edit mode for the particular column?

Use canEdit property in the column definition.

qgrid
   .model();
   .data({
      columns: [
         { key: 'name', type: 'text', canEdit: false },
         { key: 'age', type: 'number' },
      ]
   });
How to add a new row to the end?

Use data model and focus service, the same logic will be for the row deletion. 

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async" 
              [model]="gridModel">

         <q-grid-actions>
            <q-grid-action id="addRow"
                           title="Add Row"
                           icon="add"
                           [command]="addRow">
            </q-grid-action>
         </q-grid-actions>

      </q-grid>
   `
})
export class MyComponent {
   rows$ = this.dataService.getRows();
   gridModel = this.qgrid
      .model()
      .columnList({
         generation: 'deep'
      });

   addRow = new Command({
      execute: () => {
         const model = this.gridModel;

         model.data({ 
            rows: model.data().rows.concat([new Atom()]) 
         });

         this.qgrid
            .service(model);
            .focus(rows.length - 1);
      },
   });

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }
}
How to change edit shortcuts?

Use shortcuts properties from the edit model to change commit or cancel keys.

qgrid
   model()
   .edit({
      mode: 'cell',
      commitShortcuts: {
         $default: 'tab|shift+tab|enter|ctrl+s',
         bool: 'tab|shift+tab|left|right|up|down|home|end|pageUp|pageDown'
      }
   });
How to prevent value change it it's empty?

Use canExecute method in commit command to decide if cell value should be changed.

qgrid
   .model()
   .edit({
      commit: new Command({
         canExecute: e => !!e.newValue
      })
   });
How to enter or exit edit mode?

Use state property in edit model. Use view or edit to define mode.

qgrid
   .model()
   .edit({
      state: 'edit'
   });
How to disable edit mode?

Just set edit mode equals to null.

qgrid
   .model()
   .edit({
      mode: null
   });
Suggested Links