Question

在 Angular 10 中，我现在使用 devExtream 多选下拉框，我想在自定义中显示选定的项目，例如在下拉框中选择了 2 个项目，因此它将显示 2 个选定的项目在下拉菜单中。

HTML 部分

<div class="dx-field">
    <div class="dx-field-label">DropDownBox with embedded DataGrid</div>
    <div class="dx-field-value">
        <dx-drop-down-box
                [(value)]="gridBoxValue"
                valueExpr="ID"
                displayExpr="CompanyName"
                placeholder="Select a value..."
                [showClearButton]="true"
                [dataSource]="gridDataSource"
                (onValueChanged)="ValueChange($event)"
        >

            <div *dxTemplate="let data of 'content'">
                <dx-data-grid
                        [dataSource]="gridDataSource"
                        [columns]="['CompanyName']"
                        [selection]="{ mode: 'multiple' }"
                        [hoverStateEnabled]="true"
                        [paging]="{ enabled: true, pageSize: 10 }"
                        [filterRow]="{ visible: true }"
                        [scrolling]="{ mode: 'infinite' }"
                        [height]="345"
                        [(selectedRowKeys)]="gridBoxValue"
                >
                </dx-data-grid>
            </div>
        </dx-drop-down-box>
    </div>
</div>

TS 文件

    **gridDataSource: any;
  
  gridBoxValue: number[] = [];
    constructor(http: HttpClient) {
      
        this.gridDataSource = this.makeAsyncDataSource(http);
       
    }

    makeAsyncDataSource(http) {
      return new CustomStore({
        loadMode: "raw",
        key: "ID",
        load: function() {
            return http.get("https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/data/customers.json")
                .toPromise();
        }
    });
  }

  

  ValueChange(e)
  {
   debugger;
 
  }**

Answer 1

对于此功能，我建议您使用 tagBox（看起来像 dropDownBox，但功能不同）而不是 dropDownBox，但如果您出于某种原因需要，您应该尝试在内容数据中添加一个复选框。

DevExtream MultiSelect 下拉框自定义外观

1 个答案: