Nesting an ng-template within a kendo-grid-column

[Bob]

Hello,

For the Kendo UI Grid component, we were having some confusion re: the standard `<kendo-grid-colum>` vs. the one with a nested `<ng-template>` within it.

Specifically how you are binding the fields to the `save` event here:

saveTopic({ sender, rowIndex, isNew, dataItem }: SaveEvent): void { 

In other words, once the user EDITS a row and then SAVES - the `field`attributes of <kendo-grid-column> were binding to the `dataItem` param - however the ng-template items were NOT.

So in the end, we managed to add a `[formGroup]` on the <kendo-grid> markup, and added a few `formControlName` atrributes within the ng-templates - i.e. we have some material checkboxes and selects.

And now we are able to read the entirely modified grid row by accessing the formGroup in the SAVE function, as follows:

this.formGroup.value

 

However, at first we did NOT have the [formGroup] binding. So the updated values within ng-template were NOT binding on SAVE.

<kendo-grid [data]="topics" (add)="addTopic($event)" (edit)="editTopic($event)" (remove)="disableTopic($event)"
	(cancel)="cancelHandler($event)" (save)="saveTopic($event)"	
	[formGroup]="formGroup"
>       
	<ng-template kendoGridToolbarTemplate>
		<h3>Topics</h3>
		<button id="refreshButton" mat-flat-button (click)="getTopics()" >
			<mat-icon class="hover" svgIcon="refresh"></mat-icon>
		</button>
		<button id="addButton" kendoGridAddCommand>
			<mat-icon class="hover" svgIcon="add"></mat-icon>
		</button>
	</ng-template>

	<kendo-grid-column [width]="500" field="Name" title="Topic" ></kendo-grid-column>
	
	<kendo-grid-column [width]="350" field="Description" title="Description""></kendo-grid-column>
	
	<kendo-grid-column [width]="50" field="IsEnabled" editor="boolean" title="Enabled">
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-checkbox kendoCheckBox formControlName="IsEnabled" name="IsEnabled">
			</mat-checkbox>
		</ng-template>
	</kendo-grid-column>

	<kendo-grid-column [width]="50" field="Retained" editor="boolean" title="Retained" >
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-checkbox kendoCheckBox formControlName="Retained" name="Retained">
			</mat-checkbox>
		</ng-template>
	</kendo-grid-column>

	<kendo-grid-column [width]="200" field="HostName" title="HostName">
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-select placeholder="Select Host" formControlName="HostID">
				<mat-option value="">None</mat-option>
				<mat-option *ngFor="let host of hosts" [(value)]="host.HostID">
					{{ host.HostName }}
				</mat-option>
			</mat-select>
		</ng-template>
	</kendo-grid-column>
	
		
	<kendo-grid-command-column *ngIf="!isLoading">
		<ng-template kendoGridCellTemplate let-isNew="isNew">
			<button kendoGridEditCommand [primary]="true"><mat-icon svgIcon="edit" title="Edit" i18n-title="@@editOption"></mat-icon></button>
			<button kendoGridSaveCommand>{{ isNew ? 'Add' : Update }}</button>
			<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' 'Cancel' }}</button>
		</ng-template>
	</kendo-grid-command-column>
</kendo-grid>

So the above solution is working; but again, the formControlName has been added only to those ng-template sections. And now the binding works on all fields - that is, the user-modified values are successfully read via formGroup.value.

But if you can clarify best practices in this case, it would be appreciated and helpful.

Thanks,

Bob

 

 

[Yanmario]

Hi Bob,

The taken approach looks alright and can be used as long as everything is used and binded correctly. Another approach that can be considered is to use the formGroup context field provided by the EditTemplateDirective which is demonstrated in the following example:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-editing/#toc-setting-up-custom-inputs

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Bob]

Thank you Yanmario. I totally mised the kendoGridEditTemplate. And it appears to work nicely with the nested kendo-dropdownlist.

In my case I'm using the angular material widgets, so I'm not sure your kendo EditTemplate and [formControl] binding would work well with that. I can experiment with it, anyway.

Thanks again,

Bob

[Yanmario]

Hi Bob,

You should be fine to bind them to other 3rd party library components or HTML elements that work with Angular forms.

Regards,
Yanmario
Progress Telerik