Grid edit mode with multiple rows

[Jan]

Hello,

I am working on a grid component and I would like to enter edit mode (edit button is outside of the grid) then turn every row in the grid to edit table.

There is only one column is allowed for editable and it's a date field. So, I now create  an edit template.

<ng-template kendoGridEditTemplate let-dataItem let-formGroup="formGroup">
        <kendo-datepicker [formControl]="formGroup.get('actionDate')"
        [min]="mindate" [max]="maxdate"
         class="calendarstyle"></kendo-datepicker>
</ng-template>

 

When I add an onclick to the button outside the grid, I am using this.grid.editRow(index, formgroup) in order to make the row editable.

this.grid.editRow(rowIndex, this.formGroups[rowIndex]);

 

However the editRow makes/fires an DataStateChangeEvent and it makes the scroll bar moves.

The story behind is that I have a tons of records with no actual page and I am using data state change to just skip rows.

public dataStateChange(state: DataStateChangeEvent): void {
  this.gridView = process(this.data, this.state);
}

 

Is there anyway to make the multiple editable rows better?

Can you also suggest the life cycle of the grid / state changes, please?

 

[Svet]

Hi Jan,

As we already started a discussion in a support ticket, I will paste my last answer here to be publicly available. In case you have any further questions feel free to continue the discussion here in the forum or in the ticket.

We can call the editRow function as many times equal to the total number of items. During the last loop operation we can call the editRow for the first row in order to focus it:

public editRow(grid){
  let form;
  for(let i = 0; i < 78; i++){
    form = new FormGroup({
        'ProductID': new FormControl(),
        'ProductName': new FormControl('', Validators.required),
        'UnitPrice': new FormControl(0),
        'UnitsInStock': new FormControl('', Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
        'Discontinued': new FormControl(false)
    });
    grid.editRow(i, form)
    if(i == 77){
      grid.editRow(0)
    }
  }
}

Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-xr1xka-9ytvbb?file=app/app.component.ts

This approach has a limitation, that we would not be able to get the data for each item, while in edit mode, unless we have all records available in the client. This is why, I can suggest another approach, which relies on the use of kendoGridCellTemplate. Basically, using Angular's *ngIf directive, we will have one template demonstrating the cell's content in edit mode and another one, that demonstrates the content, while not in edit mode:

  <kendo-grid-column field="ProductName" title="Product Name">
                <ng-template *ngIf="isInEditMode" kendoGridCellTemplate let-dataItem="dataItem">
                    <input [(ngModel)]="dataItem.ProductName" kendoGridFocusable name="ProductName" class="k-textbox" required/>
                </ng-template>
                <ng-template *ngIf="!isInEditMode" kendoGridCellTemplate let-dataItem="dataItem">
                    {{dataItem.ProductName}}
                </ng-template>
            </kendo-grid-column>
...
      <button (click)="changeMode(grid)">Eneter edit mode</button>
...

    public changeMode(grid){
      this.isInEditMode = !this.isInEditMode;
      if(this.isInEditMode){
        grid.editRow(0)
      }
    }

Check the following example demonstrating this functionality:
https://stackblitz.com/edit/angular-acip3k?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Virgil]

Freaking awesome! I've been looking for this for a while.  Nice work!