Angular DevExtreme Datagrid : how to get values of a row

Question

i have this datagrid , here is my template :

    <dxo-paging [enabled]="true"></dxo-paging>
    <dxo-editing
      mode="row"
      [allowUpdating]="true"
      [allowDeleting]="true"
      [allowAdding]="true">
    </dxo-editing>

    <dxi-column dataField="Cuid" caption="Cuid" [width]="130"></dxi-column>
    <dxi-column dataField="Nom" caption="Nom"></dxi-column>
    <dxi-column dataField="Prenom" caption="Prenom"></dxi-column>
    <dxi-column
      dataField="EdoID"
      caption="Edo"
      [width]="125"
      [setCellValue]="preSelectEdo">
      <dxo-lookup
        [dataSource]="edos"
        displayExpr="Code"
        valueExpr="ID">
      </dxo-lookup>
    </dxi-column>

    <dxi-column
      dataField="ShopID"
      caption="Boutique"
      [width]="125"
      [setCellValue]="preSelectShop">
      <dxo-lookup
        [dataSource]="shops"
        displayExpr="Name"
        valueExpr="ID">
      </dxo-lookup>
    </dxi-column>
  </dx-data-grid>

and I want to, get a reference to my datagrid and get a row value within a click button:

in my component.ts, I've tried this :

export class myComp {
constructor(){}
  @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;

  getValueCell(rowIndex, datafield) {
    this.dataGrid.instance.cellValue(rowIndex, datafield);
  }

  onClickBtn(){
    result = this.getValueCell(1,'Name');
    console.log(result);
  }
}

as you can see, when clicking: I got a result 'undefined'; it seems like I haven't got the right reference to the datagrid

Suggestions ?

Try with this.dataGrid.instance.getCellElement(rowIndex, dataField) — Jesus Gilberto Valenzuela, Sep 10 '18 at 19:02
@JesusGilbertoValenzuela that seems sto be rendrering the html element and not the value (and it worlks only ) with jquery , in my case i am udenr angular — firasKoubaa, Sep 10 '18 at 19:22
Well, then if you want to get the value of the selected row or rows, you can try this.dataGrid.instance.getSelectedRowsData() and that method give you the selected rows and you can parse them. — Jesus Gilberto Valenzuela, Sep 11 '18 at 15:57
For getting grid instance try the next https://js.devexpress.com/Documentation/Guide/Getting_Started/Widget_Basics_-_Angular/Get_a_Widget_Instance/ — Mikhail Vitik, Sep 12 '18 at 08:37

score 0 · Answer 1 · answered Oct 26 '21 at 11:37

try this:

 onFocusedRowChanged(e) {
        var rowData = e.row && e.row.data,
            cellValue,
            assigned;

        if(rowData) {
            cellValue = e.component.cellValue(e.row.rowIndex, "Assigned");
            this.taskEmployees.byKey(cellValue).done((item) => {
                assigned = item.Name;
            });

            this.taskSubject = rowData.Task_Subject;
            this.taskAssigned = assigned;
            this.startDate = new Date(rowData.Task_Start_Date).toLocaleDateString();

            this.taskStatus = rowData.Task_Status;
            this.taskProgress = rowData.Task_Completion ? rowData.Task_Completion + "%" : "";
        }
    }

Angular DevExtreme Datagrid : how to get values of a row

1 Answers1