Editable Cell Templates Default Back to Inputs When One Row

[B]

Hello,

I have come across an issue that I was able to replicate in a stackblitz. When using dynamic columns to display a Kendo Grid's data, specifically when the grid only contains one row, the editTemplate unexpectedly reverts to a standard input field. This behavior does not occur when the grid has multiple rows.

In my example stackblitz below, I have a dropdownlist as the edit template for the column Product Type. Upon clicking it, (sometimes a double click) it turns into a input.

 

To repeat:
1) add product type in multi select above grid to display row
2) Click Dropdown
3) Dropdown becomes input

I'd appreciate any help, I've tried a few things like event.preventDefault and other ways to try and stop this behavior, but I cannot figure out a way. Again, it only happens when there is one row.

Thanks in advance!

Kendo UI for Angular Example Application (stackblitz.io)

https://stackblitz.com/edit/angular-ppvmbg?file=src%2Fapp%2Fapp.module.ts

[Georgi]

Hi,

Thank you very much for the runnable example provided.

From what I understood from your question, you are currently utilizing the built-in in-cell editing feature of the Kendo UI for Angular Grid together with a custom editing component and are experiencing issues such that the default editing component is sometimes rendered instead of the custom one. Please let me know if I misinterpreted the query.

I have thoroughly examined the StackBlitz demo that was attached in the thread, and from what I have noticed, the EditTemplateDirective, which is responsible for displaying the custom editing component, is rendered inside the CellTemplateDirective:

<ng-template kendoGridCellTemplate let-dataItem>
    <span *ngIf="column.column_name == 'ProductType'">
        <ng-template kendoGridEditTemplate
            let-dataItem="dataItem"
        >
            <kendo-dropdownlist
                [data]="product_types"
                [value]="dataItem.ProductType"
                textField="opt_value"
                valueField="id"
            >
            </kendo-dropdownlist>
        </ng-template>
    </span>
    {{ dataItem[column.column_name]}}
</ng-template>

Generally speaking, the EditTemplateDirective should be rendered inside the respective ColumnComponent but should be outside of other template directive:

<ng-template kendoGridCellTemplate let-dataItem>
    <span *ngIf="column.column_name == 'ProductType'"></span>
    {{ dataItem[column.column_name]}}
</ng-template>

<ng-template kendoGridEditTemplate
    let-dataItem="dataItem"
>
    <kendo-dropdownlist
          [data]="product_types"
          [value]="dataItem.ProductType"
          [valuePrimitive]="true"
          textField="opt_value"
          valueField="id">
    </kendo-dropdownlist>
</ng-template>

To better illustrate the suggested modification, I am sending you a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-ppvmbg-ee9fbv

From what I have noticed, the custom editing component is rendered as expected after the update of the HTML markup.

I hope the provided information helps.

Regards,
Georgi
Progress Telerik

[B]

Thank you Georgi! This was very helpful.

[Georgi]

Hi,

I am glad to hear that the information in my latest reply was helpful.

I am now closing this forum thread. 

Regards,
Georgi
Progress Telerik