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
iggrid template for JS

Hi team,

I have a requirement to set the background color as grey for the cell having value blank for particular column.I have used Template to implement the same.

PFB the code written for the same:

headerText: "OPTIMIZATION (STEP 6)",
group: [{
headerText: "DFMEA Prevention Action",
key: "OptPreAct",
dataType: "object",
width: "180px",
columnCssClass: 'column-cyan-text',
headerCssClass: 'header-text',
template:'{{if ${OptPreAct} ==="" && ${OptDectAct} !==""}}<td class="grey"></td>{{/if}}'
headerText: "DFMEA Detection Action",
key: "OptDectAct",
dataType: "object",
width: "180px",
columnCssClass: 'column-cyan-text',
headerCssClass: 'header-text',
It is showing background grey but the cell of the same column key having a Value(Not Blank) does not show value in the td .
Plz let me know if I am doing anything work. Please no the needful ASAP.
  • 0
    Offline posted

    Hello Apeksha,

    If you really want to change the cell’s background, 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 background, but you won’t actually modify the cell itself.

    In order to achieve what you want, you may wish to bind yourself to the rowsRendered function. It is useful because it is called after all the visible rows are rendered.

    There, you will need to provide the lookup column’s key. Said otherwise, the key of the column, which you’d check for emptiness. That index will we name lookupColIdx.

    Another mandatory key is the one of the column, which cells’ backgrounds you’d like to edit. We will call it targetColIdx.

    After having them, you will be able to get the indices of the two columns.

    You must find the indices of the rows, where the empty fields occur, as well. That is possible with an iteration through the rows. There, you will check whether the value of the cell with lookupColIdx and rowIdx is empty or not. If it is, you will add the class colExpired to the cell with targetColIdx and rowIdx.

    I’m providing you a jsFiddle with detailed comments, which would help you in understanding the explanations of mine.

    If you have any further questions, regarding the matter, don’t hesitate to contact me.

    Best regards,
    Petko Bozhinov