[Solved] Possibility to use kendoGridSaveCommand directive inside kendoGridToolbarTemplate when adding new item to Grid

[Andrei]

Hi ! 

I have to locate Save-button for saving created new record in table in toolbar of the Grid.

<kendo-grid
..........
(edit)="editHandler($event)"
(cancel)="cancelHandler($event)"
(save)="saveHandler($event)"
(remove)="removeHandler($event)"
(add)="addHandler($event, myForm)"
..........
#grid
>
<ng-template kendoGridToolbarTemplate> 

<button *ngIf="!isEdit && !isNew" kendoGridAddCommand type="button" look="bare" (click)="isNew = true">
<span class="fa fa-plus-circle"></span>{{ strings.add }}
</button>
....................................................
<button #btnSave class="btn-save" [disabled]="myForm.invalid || myForm.pristine" kendoGridSaveCommand [primary]="true" look="bare">
<span class="fa fa-check-circle"></span>{{ strings.save }}
</button>
....................................................
</ng-template>

 

But when I am adding new item in grid then Save-button isn't appearing (display: none property is set for that element).

I am trying to make Save-button visible/invisible inside my custom code. But in that case I am getting error inside save-command.directive.js (more precisely inside edit.service.js, string var formGroup = this.context(rowIndex).group; (this.context is undefined)) 

 

When I am trying to use custom button for saving created record I don't see the way how to get values of created record. May be you give me a piece of advice in what way in that case I can get created record ?

So, how can I solve that problem ?

Thanks a lot.

[Dimiter Topalov]

Hello Andrei,

The built-in Grid editing directives are applicable when buttons are used within the CommandColumn only, as they depend on specific variables available within the CellTemplate only (like for example "isNew", or is the row in editing mode), and are not available in the Toolbar template.

To use a custom button with save functionality in the Grid Toolbar template, you will need to store and access the required information in some custom class fields and access it in the Toolbar template to pass it to the method that handles saving the item.

For example, the FormGroup should be already available as a class field, the "isNew" setting can be stored in the "add" event handler, and the rowIndex for newly added items is -1:

https://stackblitz.com/edit/angular-3fq4rg-wh8zja?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik