Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Vincent LEBRANCHU
360
Issues when renderCheckboxes and templates on a boolean column.
posted

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

Parents
No Data
Reply
  • 460
    Offline posted

    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

Children