Introduction
In this episode, we are going to understand AG Grid’s two Interfaces and it is the heart of AG Gride. Initiating the grid, defining columns, loading data, attaching events to rows, customizing column display name, enable/disable pagination etc. all are done through these two interfaces only.
AG Grid – Interfaces
AG Grid has following two Interfaces
- Grid Interface – It has the following two items
- Grid Options
- Grid API
- Grid Events
- Row Node
- Column Interface – It has the following three items
- Column Properties
- Column API
- Column Object
1.a – Grid Options (GridOptions)
Grid Options has properties and methods which are used to configure the grid. In our previous episode to initiate an AG Grid we passed two parameter and the second parameter is the Grid Options.
In the following example we are going to explore 10 Grid Options properties. Some of the Grid Options properties value are simple primitive type like integer/text and some are objects.
const gridDiv = document.querySelector('#my-ag-grid');
const gridOptions = {
columnDefs: [
{ field: 'firstName', filter: 'agTextColumnFilter', suppressMenu: true },
{ field: 'lastName', suppressMenu: true },
{ field: 'age' },
{ field: 'country' },
],
rowData: [
{ firstName: 'Abu1', lastName: 'Thakir', age: 10, country: 'USA' },
{ firstName: 'Abu2', lastName: 'Thakir', age: 10, country: 'USA' },
{ firstName: 'Abu3', lastName: 'Thakir', age: 10, country: 'USA' },
{ firstName: 'Abu4', lastName: 'Thakir', age: 10, country: 'USA' },
{ firstName: 'Abu5', lastName: 'Thakir', age: 10, country: 'USA' },
],
rowSelection: 'multiple',
defaultColDef: {
resizable: true,
floatingFilter: true,
},
statusBar: {
statusPanels: [
{ statusPanel: 'agTotalRowCountComponent' },
{ statusPanel: 'agSelectedRowCountComponent' },
],
},
suppressMovableColumns: false,
suppressCsvExport: true,
suppressExcelExport: true,
pagination: true,
paginationPageSize: 2,
};
//Creating AG Gride object
new agGrid.Grid(gridDiv, gridOptions);
in progress….