Open/Expand DropDownList on cell edit

[Aleksandar]

I've implemented in-cell editing with a dropdownlist using reactive forms and a cellclick event handler. How can I also automatically open/expand the dropdownlist on cell edit? The dropdownlist has a Toggle method that will open it but I can't reference the dropdownlist to invoke it. The sender of the cellclick event only includes the grid component.

Markup:

<kendo-grid-column field="manufacturer" title="Manufacturer" width="130" [locked]="true">
  <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
    <kendo-dropdownlist [data]="manufacturers" textField="text" valueField="value" [valuePrimitive]="true" [formControl]="formGroup.get('manufacturer')">
    </kendo-dropdownlist>
  </ng-template>
</kendo-grid-column>

 

Script:

public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
       if (!isEdited) {
           sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
       }
   }

 

Dropdownlist method I'd like to invoke on cell edit:

this.dropdownlist.toggle(true);

 

 

[Hetali]

Hello Aleksandar,

In order to toggle the Kendo UI DropdownList in the Kendo UI Reactive Forms Grid, use the template reference variable and the setTimeout method in the edit event. For example:

<kendo-grid [data]="view | async" (edit)="editHandler($event)">
  <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
      <kendo-dropdownlist #dropdown [value]="dataItem.Discontinued" [data]="[true, false]">
      </kendo-dropdownlist>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

public editHandler({ sender, rowIndex, dataItem }) {
  setTimeout(() => {
    this.dropdown.toggle(true);
  });
}

In this StackBllitz example, the DropDownList opens when you edit the Grid row.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Aleksandar]

Hetali, you're awesome!

I had @ViewChild("dropdown") but it was always undefined. SetTimeout did the trick.

Thanks!

[Hetali]

Hello Aleksandar,

I am glad I could help. 

To close the thread, please mark the solution as an answer by selecting the "Mark as answered" option under the thread. If you have any questions in the future pertaining to this ticket, you can simply reply in this thread to reopen the ticket.

Regards,
Hetali
Progress Telerik