how to update the content of a column footer in the grid?


#1

I would like to update the content of a specific column in the footer dynamically, is it possible?


#2

Here is what I use to update a header and footer dynamically. In my case, I am updating a row count in the header and CSS in the footer. I hope this helps in your use case.

function redrawSCGrid() {
	grid_SC.setColumns([
		{ width: 272, id: "emp_name", header: [{ text: "<span>Succession Candidate Name (n = " + sc_count + ")</span>", align: "left"}], footer: [{ text: '<div class="common_grid_footer_border"></div>', colspan: 1 }], align: "left" },
	]);
}

#3

Yes, that helped, but I had to pass the configuration of all columns, in my case there are at least 20. In my tests if I only pass the configuration of the column I want to update, the grid renders only this column, and it deletes the others.

I did it as follows…

    // get the settings of all columns in the grid 
    let columns = [];
    columns.push(grid.getColumn("id"));// 0
    columns.push(grid.getColumn("isNew"));// 1
    ...
    ...
    ...

    let columnQtde = columns[10];// column position that will be updated 
    let footerQtde = columnQtde.footer;// get footer prop
    footerQtde[0].text = qtdeAdd;// update text value
    columnQtde.footer = footerQtde;
    columns[10] = columnQtde;// sets the column again

    // updates grid settings
    grid.setColumns(columns);

Thank you for your help


#4

Very nice approach. Glad it worked for you …