Grid renderer code get executed when selecting grid row

Using the following code to add a checkbox to a particular cell on each row:

let grid = this.$$(“#gridDomainAccessList”);

grid.items = response.entrys;

log.info(“cms-admin-accounts”, “_restRetrieveUserDomainAccess”, “pre- renderer”, “”);
const self = this;
grid.columns[2]
.renderer = function(cell) {
self.$.log.info(“cms-admin-accounts”, “_restRetrieveUserDomainAccess”, “renderer”, cell);
cell.element.innerHTML = ‘’;
let checkbox = document.createElement(‘input’);
checkbox.type = “checkbox”;
if(cell.data == true)
checkbox.setAttribute(“checked”, “checked”);
checkbox._colIndex = cell.index;
checkbox._rowData = cell.row.data;

checkbox.addEventListener('click', function(e){
    self._domainUserAccessChanged(e);
});
cell.element.appendChild(checkbox);

}
grid.refreshItems();

I can select any checkbox and check/uncheck it. But if I select the row it unchecks all the checkboxes. In my log I notice that the code in grid.columns[2]
.renderer = function(cell) {} is executed which remakes the checkboxes. But the log title “pre- renderer” isnt. Any reason why the renderer is called again? Is there a fix to the way i’m coding?

29326.png

I created a sudo fix so that the renderer does re-create the rows checkbox. It works but still wondering if i’m missing the correct way of solving this.

grid.items = response.entrys;
grid.refreshItems();

this.$.log.info(“cms-admin-accounts”, “_restRetrieveUserDomainAccess”, “pre- renderer”, “”);
const self = this;


let index = 0;


grid.columns[2]
.renderer = function(cell) {



if(index < response.entrys.length){

    self.$.log.info("cms-admin-accounts", "_restRetrieveUserDomainAccess", "renderer", cell);
    cell.element.innerHTML = '';
    let checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    if(cell.data == true)
        checkbox.setAttribute("checked", "checked");
    checkbox._colIndex = cell.index;
    checkbox._rowData = cell.row.data;

    checkbox.addEventListener('click', function(e){
        self._domainUserAccessChanged(e);
    });
    cell.element.appendChild(checkbox);
}



index++;

}

Hello Eric,

The renderer runs every now and then, for example when you scroll the currently visible rows out of and then back to the viewport. To have the checkboxes display the correct value, you’d have to make the checkbox change update the value of cell.data in your case.

If it’s an option to switch, I highly recommend trying out 2, which makes all this a lot easier. It’s currently at alpha stage but we’re quite close to reaching beta.

Latest release:
https://github.com/vaadin/vaadin-grid/releases/tag/v2.0.0-alpha1

Live demos:
https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha1/demo/