Hello,
I'd like some advice, I use the iggrid with the renderCheckboxes which is fine when all the cells in the column are editable or not (we use a different css class to indicate that the column is editable or not) . But for one of my grid I need to do that on a cell level for example in the same column:
- Editable cells: checkboxes are blue
- Readonly cells : checkboxes are grey.
I tried to use a template in that column, cloning the html of the standard ui-checkbox and adding some CSS class to indicate the read-only aspect of the cell. But I need to use the value of the cell itself to get the check state and that doesn't seem to work:
http://jsfiddle.net/gp8noajd/
the jsrenderer template:
"{{if MakeFlag == false}}KO{{else}}OK{{/if}}"
doesn't work and I think it's because of the value of the cell itself because if I change that to another boolean value without template :
{{if FinishedGoodsFlag == false}}KO{{else}}OK{{/if}}
then the column template is working but with the FinishedGoodsFlag value.
If I turn off renderCheckboxes it's working (but I don't wan't that), my guess is that the templating engine is getting something else maybe the html value of the checkbox or the template instead of the value.
It says in the API under "renderCheckboxes" that : "Checkboxes are not rendered for boolean values in columns with a column template." so it shouldn't ?
So I don't see how we can achieve to use a template on a boolean column if we can't use its value inside the template with renderCheckboxes enable for other boolean column.
Is there any work around or other way to do that? shall I create a ticket? By the way we are using jsrenderer but I tried infragistics engine and it's not working either.
Best regards
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
Hello Georgi,
I agree with you that this should work but this means parsing again all rows which could implies performance issues. My question is the following why is it not working with templates based on a boolean column when renderCheckboxes is set to true?
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.
Thank you for the provided information.
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;'>✕</span> {{else}} <span style='color: blue; font-weight: bold;'>✓</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.
Hello Georgio,
Thank you for your answer I'll have a look tomorrow at your sample, but I do not agree with you:
"Checkboxes are not rendered for boolean values in columns with a column template"
This doesn't mean that templating on a boolean column (using its value in the template) will not work if renderCheckboxes is enable. In fact, it clearly suggests that the checkboxes won't be created (I agree) but that the template will be applied, and it works if that column is not used by the template (which is in my opinion useless). In fact that sentence indicates more that if renderCheckboxes is true and a template is on a column then that column will use the template (weither the template contains that column name or not) and not the checkboxes aspect.
Best regards.
Any update?