How to add bootstrap buttons column to DevExtreme DataGrid (Angular)?

Question

I want to add a bootstrap buttons to DataGrid. These buttons will act as download button for each row. I have the following codes for datagrid:

<dx-data-grid id="pmschedule-dataGrid" [hoverStateEnabled]="true" [dataSource]="ds"
            [showBorders]="true" [allowColumnResizing]="true" (onSelectionChanged)="onDataGridSelectionChanged($event)">
            <dxo-paging [pageSize]="50" [pageIndex]="0"></dxo-paging>
            <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[50, 100, 200]" [showNavigationButtons]="true"
                [showInfo]="true">
            </dxo-pager>
            <dxo-filter-row [visible]="true"></dxo-filter-row>
            <dxo-selection selectAllMode="page" [showCheckBoxesMode]="checkBoxesMode" mode="multiple"></dxo-selection>
             .
             .
             .
             .
            <dxi-column type="buttons" caption="Download Link">
                <button class="btn btn-primary">Download</button>
            </dxi-column>
        </dx-data-grid>

When I run the app, There is a column named Download Link but there are no buttons. I studied documents from DevExtreme but I couldn't find any information to add a command column for downloading (Adding bootstrap buttons).

Is there any solution?

score 1 · Accepted Answer · answered Aug 12 '23 at 15:50

You will need to change code little bit. sharing you the docs link where they had rendered the image in each row similarly you have to write your button.

check this out.

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnTemplate/Angular/Light/

something on this line

<dx-data-grid
  id="gridContainer"
  [dataSource]="employees"
  keyExpr="ID"
  [showBorders]="true"
>
  <dxi-column
    dataField="Picture"
    [width]="100"
    [allowFiltering]="false"
    [allowSorting]="false"
    cellTemplate="cellTemplate"
  ></dxi-column>
  <dxi-column dataField="Prefix" [width]="70" caption="Title"></dxi-column>
  <dxi-column dataField="FirstName"></dxi-column>
  <dxi-column dataField="LastName"></dxi-column>
  <dxi-column dataField="Position"></dxi-column>
  <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
  <dxi-column dataField="HireDate" dataType="date"></dxi-column>

  <div *dxTemplate="let data of 'cellTemplate'">
    <button>
      my button
    </button>
  </div>
</dx-data-grid>

How to add bootstrap buttons column to DevExtreme DataGrid (Angular)?

1 Answers1