Hello Vincent,

I have been looking into your question and in order to change the cell’s styles, you won’t be able to achieve it using the template property of the column. It could help you in case you wish to customize the contents of a cell, you may be able to simulate a change in the cell’s styles, but you won’t actually modify the cell itself.

To achieve your requirements, what I could suggest as an approach is to handle the rowsRendered event of the iggrid. When rendering the rows, you will get the column key of the given column and its index.

rowsRendered: function(evt, ui) {
            let columnKey = "MakeFlag";
            let targetColumnIndex = $(`#grid_${columnKey}`).data("columnIndex");
}

Then you'll use the allRows method of the igGrid to access all the rendered rows and get every single cell from the given column and row with cellAt method, passing the column index and row index.

$("#grid").igGrid("allRows").each((i) => {
                let targetCell = $("#grid").igGrid("cellAt", targetColumnIndex, i);
}

After accessing the cells, you can access the style property of each cell and change its visualization, or you can access the checkbox in the cell and change the styles again. This can be done on a given condition according to your custom logic of your application.

if (targetCell.lastChild.ariaChecked === "false") {
                             targetCell.style.backgroundColor = "gray";
                } else {
                             targetCell.style.backgroundColor = "blue";                                          
                             targetCell.firstChild.firstChild.firstChild.style.color = "white";
                }

The described scenario could be observed here, where I have created a igGrid which, when rendering all rows, accesses the cells of a given bool column and if the values are false it styles the cell in a gray background, and if they are true it styles the cell in a blue background with white checkboxes:

The same function is applied when finishing editing a cell in that column to update the styles. However, you can apply your custom logic and style the cells in your own way according to your application.

In addition, I have prepared small sample illustrating this behavior which could be found here.

Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

I did some debugging and it seems when the renderContent of jsrenderer is called It gets the checkBox html string instead of the value while the iggrid API says that it shouldn't (cf. renderCheckboxes api documentation). Can you confirm that I should open a ticket and that is it fixable? Because that could fix my problem.

Best Regards.

After further investigation I found that the Ignite UI jQuery documentation about renderCheckboxes clearly states that checkboxes are not compatible with templating boolean type columns: "Checkboxes are not rendered for boolean values in columns with a column template".

To achieve your requirements we will use a little trick in declaring the column and enabling the renderCheckboxes option. To begin with, when initializing columns, those boolean columns that you want to template in a certain way will be initialized as object columns.

{ headerText: "Make Flag", key: "MakeFlag", dataType: "object", width: "15%"}

After that you will use the condition templating, and in this way the value of the given column will be available and you can check if it is false or poison according to how to template the cell itself.

<script id="MakeFlagTmpl" type="text/template">
         {{if (${MakeFlag}) === false}}
         <span style='color: black; font-weight: bold;'>&#10005</span>
         {{else}}
         <span style='color: blue; font-weight: bold;'>&#10003</span>
         {{/if}}
</script>

After that we submit the template of the given column.

{ headerText: "Make Flag", key: "MakeFlag", dataType: "object", width: "15%", template: $( "#MakeFlagTmpl" ).html() }

The described scenario could be observed here:

I have prepared small sample illustrating my suggestion which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics