Kendo UI Angular - при редактировании ячейки с раскрывающимся списком другие строки непреднамеренно изменяются - PullRequest
0 голосов
/ 06 мая 2020

У меня есть случай, когда когда вы выбираете параметр в раскрывающемся списке FieldOne в режиме редактирования, он выполняет асинхронный вызов c для получения новых параметров данных для раскрывающегося списка FieldTwo. Проблема в том, что когда пользователь выбирает параметр в FieldOne, кажется, что он обновляет параметры в других строках, изменяя их значение.

HTML:

<kendo-grid
      [selectable]="selectableSettings"
      [loading]="loading"
      [navigable]="true"
      (edit)="editHandler($event)"
      (save)="updateHandler($event)"
      (cancel)="cancelHandler($event)"
      (selectedKeysChange)="onSelectedKeysChange($event)"
      [selectedKeys]="mySelection"
      [kendoGridSelectBy]="mySelectionKey"
      [resizable]="true"
      [data]="gridData$ | async">

    <!-- this dropdown makes call when selected in edit mode -->
    <kendo-grid-column field="FieldOne" title="FieldOne" width="180">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ getDropDownItem(dataItem.FieldOne, fieldOne$['value'])?.text }}
        </ng-template>
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
          <kendo-dropdownlist
            [data]="fieldOne$ | async"
            (valueChange)="onDropDownChange('FieldOne', $event, formGroup)"
            (selectionChange)="fieldOneSelectionChange($event, this, dataItem, formGroup )"
            textField="text"
            valueField="value"
            [valuePrimitive]="true"
            [formControl]="formGroup.get('FieldOne')">
            <ng-template kendoDropDownListItemTemplate let-dataItem>
              {{ dataItem.text }}
            </ng-template>
          </kendo-dropdownlist>
        </ng-template>
    </kendo-grid-column>

    <!-- This dropdown gets new data when FieldOne makes the call -->
    <kendo-grid-column field="FieldTwo" title="FieldTwo" width="180">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ getDropDownItem(dataItem.FieldTwo, fieldTwo$['value'])?.text }}
        </ng-template>
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
          <kendo-dropdownlist
            [data]="fieldTwo$ | async"
            (valueChange)="onDropDownChange('FieldTwo', $event, formGroup)"
            (selectionChange)="fieldTwoSelectionChange($event, this, dataItem, formGroup)"
            textField="text"
            valueField="value"
            [valuePrimitive]="true"
            [formControl]="formGroup.get('FieldTwo')">
            <ng-template kendoDropDownListItemTemplate let-dataItem>
              {{ dataItem.text }}
            </ng-template>
          </kendo-dropdownlist>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

Angular / TypeScript :

public fieldOneSelectionChange(selectedOption): void {
    // Gets new dropdown data for FieldTwo's dropdown
    this.fieldTwo$ = this.FieldTwoServiceCall(selectedOption);
}

Как настроить таргетинг только на одну строку, чтобы получить новые данные и не повлиять на другие строки?

Этот гиф показывает, что происходит: enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...