ag-grid checkbox column checked by renderer

Ankit Rajpoot

I am using ag-grid with checkbox header component to allow select/deselect all rows. Now when I fetch the data for grid, I want to check/uncheck checkbox column on based of some field value. I tried a renderer but it's not working with below code. If I remove 'checkboxSelection' from the column definition, it works perfectly.

  this.gridClientOptions = {
  enableFilter: true,
  enableSorting: true,
  enableColResize: true,
  pagination: true,
  paginationPageSize: 5,
  rowSelection: 'multiple',
  suppressRowClickSelection: true,
  columnDefs: [
      {
        headerName: '',
        width: 40,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        cellRenderer: 'selectedClient'
    },
    {headerName: 'Client Code', field: 'clientCode'},
    {headerName: 'Client Name', field: 'clientName'},
    {headerName: 'Group Name', field: 'groupName'},
  ],
  components: {
    'selectedClient': this.selectedClient
  },
  getRowStyle: function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: '#dfffdf' }
    }
  }      
}

selectedClient(params) {
return params.data.assignmentId > 0 ? `<input type='checkbox' checked>` : `<input type='checkbox'>`;
  }
Mehdi Tahmasebi

I built a successfully workable project for you at https://embed.plnkr.co/awEnTpOLOuXDereXrYi0/ .

As your can see in below, I removed headerCheckboxSelection, headerCheckboxSelectionFilteredOnly and checkboxSelection, and make cellRenderer inline implementation instead of selectedClient and all the thins goes fine.

var data = [
  {'clientCode':1,'clientName':'client1', 'groupName' : 'groupA', 'assignmentId':1},
  {'clientCode':2,'clientName':'client2', 'groupName' : 'groupA', 'assignmentId':0},
  {'clientCode':3,'clientName':'client3', 'groupName' : 'groupA', 'assignmentId':1},
  ];

var gridOption = {
  enableFilter: true,
  enableSorting: true,
  enableColResize: true,
  pagination: true,
  paginationPageSize: 5,
  rowSelection: 'multiple',
  suppressRowClickSelection: true,
  rowData: data,
  columnDefs: [
      {
        headerName: '',
        width: 40,
        editable: true,
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
        },
        field: 'assignmentId'
    },
    {headerName: 'Client Code', field: 'clientCode'},
    {headerName: 'Client Name', field: 'clientName'},
    {headerName: 'Group Name', field: 'groupName'},
  ],
  getRowStyle: function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: '#dfffdf' }
    }
  }      
};


var mygrid = new agGrid.Grid(document.querySelector('#myGrid'),gridOption);

enter image description here

If you want a header selection, and when data loaded all filtered row be selected, use the below source. Actually I've added a RowDataChange listener to setSelected(true) for the row that I want to filter (assignmentId > 0) :

var data = [
  {'clientCode':1,'clientName':'client1', 'groupName' : 'groupA', 'assignmentId':1},
  {'clientCode':2,'clientName':'client2', 'groupName' : 'groupA', 'assignmentId':0},
  {'clientCode':3,'clientName':'client3', 'groupName' : 'groupA', 'assignmentId':1},
  ];

var gridOption = {
  enableFilter: true,
  enableSorting: true,
  enableColResize: true,
  pagination: true,
  paginationPageSize: 5,
  rowSelection: 'multiple',
  suppressRowClickSelection: true,
  rowData: data,
  columnDefs: [
      {
        headerName: '',
        width: 40,
        editable: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: false,        
        checkboxSelection: true,
    },
    {headerName: 'Client Code', field: 'clientCode'},
    {headerName: 'Client Name', field: 'clientName'},
    {headerName: 'Group Name', field: 'groupName'},
  ],
  getRowStyle: function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: '#dfffdf' }
    }
  },
  onRowDataChanged: event => {
    event.api.forEachNode( function(rowNode, index) {
      if(rowNode.data.assignmentId > 0)
        rowNode.setSelected(true);
    });
  } 
};
this.isRowSelectable = function(rowNode) {
      return rowNode.data ? rowNode.data.year < 2007 : false;
    };

var mygrid = new agGrid.Grid(document.querySelector('#myGrid'),gridOption);

Output of new source :

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ag-grid with single column, expand column to grid width

Implement a column renderer for Vaadin 8 Grid

Angular ag-grid cell renderer checkbox not refresh value

disable checkbox selection in Ag-grid

ag-grid renders on top of cell renderer

How to conditionally enable/disable cell renderer in Ag-Grid?

How to hide column in Ag Grid?

Ag Grid Call a function on click of checkbox

Remove checkbox from rows in ag-grid

Ag grid to check if column is visible or not

Grid Column Renderer not called

Ag Grid cell renderer not instantiated until scrolled back in view

Ag-grid checkbox render based on column data?

AG-GRID unable to add icon button into each row of the ag-grid and multiselection checkbox in my ag-grid

getting checkbox value from ag-grid column

ag-grid cell renderer that shows data from multiple columns

Ag-grid cell renderer with slider not working

how to delete ag-grid row with a button in cell renderer

ag-grid vue.js: How to access to the parent grid method of a renderer in typescript?

Enable button when checkbox-templated rows of a grid's column are checked

KendoUI grid checkbox column

group selection & checkbox in ag-Grid

How to apply filter to a cell renderer in ag grid

ag-grid header checkbox selection event

AG-GRID-ANGULAR - How to check/uncheck checkbox in header component if all checkboxes in the cell renderers are checked/unchecked?

Adding list to data grid when checkbox is checked

Programmatically check an ag-grid checkbox

AG Grid: center checkbox alone in cell

AG GRID - Get Column Value