CODEWITHSUNDEEP
jqueryag-grid
user1019042
user1019042

Reputation: 2238

How to fire Ag-Grid Resize inside jquery

I'm using jQuery. Outside of the document.ready function, I'm setting up my ag-grid.

const columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' }
];

const gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    enableSorting: true,
    enableFilter: true,
    onFirstDataRendered: onFirstDataRendered,
};

document.addEventListener('DOMContentLoaded', function () {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

function onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
}

The documentation said to use OnFirstDataRendered for resizing, but I was getting a warning that it is invalidGridOptions. I ignored the warning and proceeded. The grid rows are set after the API call via

gridOptions.api.setRowData(gridData)

, but the resize method is not called; therefore, my columns are not resized. I have tried using onRowDataUpdated instead, but I get the same result, the function is not hit and it doesn't size the columns.

Upvotes: 4

Views: 850

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

onFirstDataRendered is a valid gridOption, it is an event as seen here in the docs. Your usage of onFirstDataRendered is correct

The name of the callback is constructed by prefixing the event name with on. For example, the callback for the cellClicked event is gridOptions.onCellClicked.

However, some of your gridOptions, such as enableSorting & enableFilter are not documented - I don't think this is valid. For sorting, you can use sortable: true under defaultColDef which is documented here. I think that is what your console is printing with regards to invalid options

You can see below that resize does work after data is first fetched (due to onFirstDataRendered callback), and is evident (if you pay attention) that for a split second the size does change after the data is put into grid

const columnDefs = [
  { headerName: 'ID', field: 'id' },
  { headerName: 'Name', field: 'name' },
  { headerName: 'Age', field: 'age' },
];

// let the grid know which columns and what data to use
var gridOptions = {
  defaultColDef: {
    resizable: true,
    sortable: true
  },
  columnDefs: columnDefs,
  //enableSorting: true,
  //enableFilter: true,
  onFirstDataRendered: onFirstDataRendered,
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  sampleReqToSetRowData();
});

/**
 * autosize all columns (https://www.ag-grid.com/javascript-grid-resizing/#resizing-example)
 */
function autoSizeAll() {
  var allColumnIds = [];
  gridOptions.columnApi.getAllColumns().forEach(function (column) {
    allColumnIds.push(column.colId);
  });

  gridOptions.columnApi.autoSizeColumns(allColumnIds);
}

function onFirstDataRendered(params) {
  //commented code below can instead be used for sizing columns to fit
  //params.api.sizeColumnsToFit();
  //console.log(`Fired sizeColumnsToFit`, params.api.sizeColumnsToFit);
  
  //will auto size all columns. see link provided in function declaration for more info
  autoSizeAll();
}

/**
 * just a sample to simulate API call to remote server to fetch some grid data
 */
function sampleReqToSetRowData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      var rowData = [
        { id: '0', name: 'Celica', age: 20 },
        { id: '1', name: 'Mondeo', age: 21 },
        { id: '2', name: 'Boxterrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr', age: 22 },
      ];
      gridOptions.api.setRowData(rowData);
      resolve();
    }, 2000);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>

<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>

Additional reference: https://www.ag-grid.com/javascript-grid-resizing/#resize-after-data

Upvotes: 2

nishkaush
nishkaush

Reputation: 1558

I agree with everthing that @95faf8e76605e973 said.

In addition, I got it working without the use of onFirstDataRendered:

var columnDefs = [
  {headerName: "Make", field: "make"},
  {headerName: "Model", field: "model"},
  {headerName: "Price", field: "price"}
];
    
// specify the data
var rowData = [
  {make: "Maserati", model: "bolona", price: 35000},
  {make: "Tesla", model: "Max", price: 32000},
  {make: "Ferrari", model: "Red horse", price: 72000}
];
    
// let the grid know which columns and what data to use
var gridOptions = {
  columnDefs: columnDefs,
};

function fetchData (rowData){
  return Promise.resolve(rowData);
}

$(document).ready(()=>{
   var gridDiv = document.querySelector('#myGrid');
   new agGrid.Grid(gridDiv, gridOptions);
   
   fetchData(rowData).then(res=>{
     gridOptions.api.setRowData(res);
     myGrid.api.refreshView();
     gridOptions.columnApi.sizeColumnsToFit();
   });
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
<div id="myGrid" style=" width:500px;height: 200px;" class="ag-theme-alpine"></div>

Upvotes: 1

Related Questions