Search code examples
angulardevextreme

Customize list item

In my Angular application I'm trying to develop a dropdown menu containing a list of checkbox in order to permits multiple selections.

This is my html code:

<dx-drop-down-box
    [(value)]="selectedDocTypes"
    displayExpr="label"
    [dataSource]="docTypes">
    <div *dxTemplate="let contentData of 'content'">
        <dx-list 
            selectionMode="multiple"
            [dataSource]="docTypes"
            [showSelectionControls]="true"
            [(selectedItems)]="selectedDocTypes">
        </dx-list>
    </div>
</dx-drop-down-box>

With this code the drop download is empty. This is a screenshot of the component: enter image description here

As you can see the checkboxes are visible and if I select them the selectedDocTypes variable is binded correctly.

Solution

  • DxList component has not option, like displayExpr, so to display a complex data you can use an item template. 

    <dx-list
  selectionMode="multiple"
  [dataSource]="docTypes"
  [showSelectionControls]="true"
  [(selectedItemKeys)]="selectedDocTypes">
  <div *dxTemplate="let data of 'item'">
    {{data.label}}
  </div>
</dx-list>

    Also, I prepared a plunker sample.

    PS: You can take a look at DxTagBox component, it may be more compatible with your scenario.