Ag Grid Angular (#7)- Tìm hiểu Grid Interface

Giới thiệu

Chúng ta sẽ đi tìm hiểu về grid interface, chúng ta có thể sử dụng nó để tương tác với grid, bao gồm methods, properties và events.

Grid Interface là sự kết hợp của những thứ sau đây:

• Grid Properties: properties được sử dụng để cấu hình grid, ví dụ: pagination = true.
• Grid API: methods được sử dụng để tương tác với grid sau khi nó được tạo, ví dụ: api.getSelectedRows().
• Grid Events: events được grid phát ra để thông báo cho ứng dụng về những thay đổi trạng thái (state), ví dụ: rowSelected.
• Grid Callbacks: callbacks được grid sử dụng để truy xuất thông tin cần thiết từ ứng dụng, ví dụ: getRowHeight().
• Row Node: mỗi row trong grid được đại diện bởi Row Node object, đối tượng này có tham chiếu đến phần dữ liệu row do ứng dụng cung cấp. Row Node có attributes, methods và events để tương tác với row cụ thể ví dụ: rowNode.setSelected(true).

Properties, Events, Callbacks, APIs

• Attributes: attributes là properties, nhưng không bị ràng buộc, thay vào đó chúng được cung cấp các giá trị theo literal (ví dụ: rowSelection="multiple").
• Properties: properties là attributes có ràng buộc (ví dụ: [columnDefs]="columnDefs").
• Callbacks: callbacks là có ràng buộc như properties (ví dụ: [isScrollLag]="myIsScrollLagFunction").
• Event Handlers: event handlers có ràng buộc theo cách standard Angular (ví dụ: (cellClicked)="onCellClicked($event)").
• APIs: grid API và column API có thể được truy cập thông qua component.

<ag-grid-angular
   #myGrid // assign an angular ID to the grid - optional
 
   // these are boolean values, which if included without a value, default to true
   // (if they are not specified, the default is false)
   rowAnimation
   pagination
 
   // these are attributes, not bound, give literal values
   rowSelection="multiple"
 
   // these are bound properties
   [columnDefs]="columnDefs"
   [showToolPanel]="showToolPanel"
 
   // register a callback
   [isScrollLag]="myIsScrollLagFunction"
 
   // register events
   (cellClicked)="onCellClicked($event)"
   (columnResized)="onColumnEvent($event)">
</ag-grid-angular>

Tương tác với Grid, Column qua APIs

Khi grid được khởi tạo, nó sẽ kích hoạt sự kiện gridReady. Nếu chúng ta muốn sử các API của grid thì nên cài đặt onGridReady(params) callback vào grid và lấy các api từ params. Sau đó chúng ta có thể gọi các api này để tương tác với grid.

<ag-grid-angular
   #myGrid // assign an angular ID to the grid - optional
 
   // provide gridReady callback to the grid
   (onGridReady)="onGridReady($event)"
   // ...
/>

// in onGridReady, store the api for later use
onGridReady = (params) => {
    this.api = params.api;
    this.columnApi = params.columnApi;
}

API cũng có thể được truy cập thông qua component. Ví dụ: Grid đặt ID là '#myGrid‘ sau đó truy cập API như sau:

<button (click)="myGrid.api.deselectAll()">Clear Selection</button>

Đối tượng gridOptions

Đối tượng gridOptions là một a ‘one stop shop’ cho toàn bộ interface vào grid, thường được sử dụng trong plain JavaScript. Tuy nhiên gridOptions có thể được sử dụng thay thế cho việc binding ở framework thông thường.

const gridOptions = {
    // PROPERTIES
    // Objects like myRowData and myColDefs would be created in your application
    rowData: myRowData,
    columnDefs: myColDefs,
    pagination: true,
    rowSelection: 'single',
 
    // EVENTS
    // Add event handlers
    onRowClicked: event => console.log('A row was clicked'),
    onColumnResized: event => console.log('A column was resized'),
    onGridReady: event => console.log('The grid is now ready'),
 
    // CALLBACKS
    isScrollLag: () => false
}

<ag-grid-angular
    [gridOptions]={gridOptions}

Ngay khi grid được khởi tạo, chúng ta có thể truy cập tới grid API và column API (columnApi) trên đối tượng gridOptions

// refresh the grid
this.gridOptions.api.refreshView();
 
// resize columns in the grid to fit the available space
this.gridOptions.columnApi.sizeColumnsToFit();

Events là bất đồng bộ

Do Grid events là bất đồng bộ,  state của grid sẽ được thiết lập vào thời điểm event callback được gọi.

Giá trị Properties mặc định

Khi property có giá trị là boolean (true hoặc false), thì false (hoặc để trống) sẽ là giá trị mặc định

Tham khảo

Theo Angular Grid: Grid Interface