I am trying to set conditional row template for my iggrid .Following is the code :
$("#MyGrid").igGrid({ showHeader: true, autoGenerateLayouts: false, columns: [ { headerText: "Id", key: "id", dataType: "string" , hidden:true }, { headerText: "Code", key: "Code", dataType: "string" }, { headerText: "Name", key: "Name", dataType: "string"}, { headerText: "Country", key: "Country", dataType: "string"}, { headerText: "Count", key: "Count", dataType: "string"} ], responseDataKey: 'rows', rowTemplate: "<tr>" +
"<td> {{if verifyCount(${Count}) == 1 }}<span class='criticalAttention'>${id}</span>{{elseif verifyCount(${Count}) == 2 }}<span class='Attention'>${id}{{/if}}" + "</td>" +
"<td>{{if verifyCount(${Count}) == 1 }}<span class='criticalAttention'>html Code</span>{{elseif verifyCount(${Count}) == 2}}<span class='Attention'>html Code{{/if}}" + "</td>" + "<td>{{if (verifyCount(${Count}) == 1}}<span class='criticalAttention'>${Name}</span>{{elseif verifyCount(${Count}) == 2}}<span class='Attention'>${Name}{{/if}}" + "</td>" +
"<td>{{if (verifyCount(${Count}) == 1}}<span class='criticalAttention'>${Country}</span>{{elseif verifyCount(${Count}) == 2}}<span class='Attention'>${Country}{{/if}}" + "</td>" +
"<td>{{if((verifyCount(${Count}) == 1}}<span class='criticalAttention'>${Count}</span>{{elseif verifyCount(${Count}) == 2}}<span class='Attention'>${Count}</span>{{/if}}" + "</td>" +
"</tr>",
dataSource: '@Url.Action("action", "controller")', features: [ { name: "Paging", type: "remote", pageSize: 10, recordCountKey: 'records' } , { name: "Sorting", type: "remote" }, { name: "Tooltips", columnSettings: [ { columnKey: "Name", allowTooltips: true } ], visibility: "overflow", showDelay: 100, hideDelay: 100 }
//--------------------------------//
I need to make some calculations on the count field and then change the bg colour of each row based on these calculations . Hence , I tried writing a js function callled verifyCount() which then calculates and returns either 1 or 2 and set the class accordingly. However there are multiple problems here,
1) the function is not identified.
2)the code field which actually an anchor tag is being rendered as a string rather then a url.
Please assist and let me know if you guys need any additional info.Thanks.
Hello Roy,
Infragistics Templating Engine doesn't support calling a JavaScript function inside the template. That's why your template doesn't work. You can add additional unbound column to the grid in which you calculate the result of the verifyCount function and then use the unbound column value in the template.
Attached you can find the sample which demonstrates the described solution.
Best regards,Martin Pavlov
Infragistics, Inc.
Hi,
your suggestion helped me over come this issue. Thanks a lot. However , there is still one minor issue left . The link which is to be rendered in the second column ,
"<td>{{if ${VerifyCount} == 1 }}<span class='criticalAttention'>html Code</span>{{elseif ${VerifyCount} == 2}}<span class='Attention'>html Code{{/if}}" + "</td>" +
is simple being rendered as html code in the column . Can you please suggest what I might be doing wrong.The actual data is "<a href="...">Code</a>". It needs to be rendered as a clickable link.
Thanks and regards,
Sudipto