How to bind array to ag-grid column dynamically

Question

I am working on ag-grid component. In this grid I have to bind only column in vertical format. suppose I have an array ["0.1", "0.4", "cn", "abc"] and I have to display it in ag-grid component as below and i don't have any rowData.

    0.1
---------------------------------
    0.4
---------------------------------
    cn
---------------------------------
    abc
--------------------------------

Is it possible to bind above array in vertical format using ag-grid. or is there any other solution, Please any help will be appreciated. Thanks in advance.

my html file:

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

can u change the format of the array to ["0.1"],[ "0.4"], ["cn"], ["abc"] — Hana Wujira
– Hana Wujira, Commented Sep 20, 2018 at 10:54

Lia · Accepted Answer · 2018-09-20 11:07:09Z

1

you can try:

export class MyGridApplicationComponent {
    public gridOptions: GridOptions;
    public myArray =  ["0.1", "0.4", "cn", "abc"] ;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "",
                field: "value",
                width: 100
            }
        ];
        this.gridOptions.rowData = 
        this.myArray.map(function(item) {
  return {"value":item};
})
}
}

and in html:

<div style="width: 100px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

DEMO

answered Sep 20, 2018 at 11:07

Lia

12k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Python Over a year ago

It does not show the grid after adding ag-grid-community import tag for GridOptions.

Collectives™ on Stack Overflow

How to bind array to ag-grid column dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related