I am using row templates to create different types of rows. I want to create a different row based on the type. So far it is achievable. The problem is when the type changes, the row does not. It seems like the row templates are only used when the row is first created. How do I evaluate the row template again based on a new value in the column?
pseudo code:if column 'type' value equals '*' then // row is a note and columns should be spannedelse // row is normalend if
My row template looks like this:<tr> <td data-key='${ItemId}'>${ItemId}</td> <td data-key='${ItemType}'>${ItemType}</td> <td data-key='${Note}' {{if isNote(${ItemType})}} colspan='10' style='background-color: yellow;' {{else}} style='background-color: red;' {{/if}}>${Note}</td> ...</tr>function isNote (type) { if (type === '*') { return true; }When the type is changed from '*' to '$' I need the note column to disappear and show the other 10 columns like a normal record but I can't seem to get that working. Any ideas? return false;}
Hello Daniel,
Thank you for posting in our community!
I have attached a sample demonstrating combined usage of conditional templating and updating features. Several types of rows are included in the grid in this sample. The ID cell is colored differently according to the row type.
$("#grid1").igGrid({
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "Name", dataType: "string" },
{ headerText: "Distributor", key: "Distributor", dataType: "string" },
{ headerText: "Quantity", key: "Quantity", dataType: "number"},
{ headerText: "Price", key: "Price", dataType: "number"}
],
width: '550px',
height: '420px',
rowTemplate:
" <tr>
<td> {{if ${ProductID} === 2}}
<div class='marked-row'>${ProductID}</div>
{{elseif ${ProductID}===3}}
<div style='background-color:red'>${ProductID}</div>
{{elseif ${ProductID}===0}}
<div style='background-color:blue'>${ProductID}</div>
{{else}}<div>${ProductID}</div>
{{/if}}
</td>
<td><span style='color:#0000ff'>${Name}</span> </td>
<td><span style='color:#0000ff'>${Distributor} </span> </td>
<td><span style='color:#0000ff'>${Quantity}</span> </td>
<td><span style='color:#0000ff'>${Price} </span> </td>
</tr>",
dataSource: products,
autoCommit: false,
primaryKey:'ProductID',
features:
[
{
name: "Updating"
}
]
});
Colors are automatically changed while rows are edited.
Feel free to modify the sample and use it in your own projects if needed.
If you have more questions don’t hesitate to contact me.
I am following up to check if you have been able to resolve your issue. If you need any further assistance don’t hesitate to contact us again.