This is a migrated thread and some comments may be shown as answers.

Open/Expand DropDownList on cell edit

3 Answers 914 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aleksandar
Top achievements
Rank 1
Aleksandar asked on 08 Apr 2021, 09:22 PM

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);

 

 

3 Answers, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 09 Apr 2021, 05:48 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Aleksandar
Top achievements
Rank 1
answered on 09 Apr 2021, 11:58 PM

Hetali, you're awesome!

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

Thanks!

0
Hetali
Telerik team
answered on 12 Apr 2021, 03:19 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Aleksandar
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Aleksandar
Top achievements
Rank 1
Share this question
or