I am currently playing around with your rowtemplate feature to achieve a pseudo table look for each specific row in the igrid. A nested block seems the way to go to achieve this and so far its worked wonderfully. However, I came across a instance where I need multiple conditionals within the nested block and it appears to be bugging out on the second if-conditional; if I remove the second conditional the table generates.
I noticed in your 'conditional row template', and pretty much every conditional example, there is only 1 conditional per <td>. Is this a limitation of the rowtemplate?
If this is indeed a limitation, the only reason I need multiple conditionals is to properly set the checkmark for checkboxes used for boolean data I would like to display using the same look as the infragistics checkboxes in standard igrids. Is there some built-in rowtemplate method that can render the checkbox in a row template for boolean property?
Below are the template and the Html wrapper used to generate the grid.
<tr> <td style='width: 100%;'> <div style='width: 100%;'> <span class='rosite-rowtemplate-label' style='width: 125px;'>Name:</span> <span class='rosite-rowtemplate-value' style='width: 200px;'>${NestedProperty.FirstName} ${NestedProperty.LastName}</span> <span class='rosite-rowtemplate-label' style='width: 125px;'>Gender:</span> <span class='rosite-rowtemplate-value' style='width: 100px;'>${NestedProperty.Gender}</span> <br> <span class='rosite-rowtemplate-label' style='width: 125px;'>Email:</span> <span class='rosite-rowtemplate-value' style='width: 200px;'>${NestedProperty.Email}</span> <span class='rosite-rowtemplate-label' style='width: 125px;'>Boolean1:</span> <span class='rosite-rowtemplate-value' style='width: 100px;'> <span class='ui-state-default ui-corner-all ui-igcheckbox-small' style='display:inline-block'> <span style='display:block' class='ui-icon {{if parseInt(${NestedProperty.IsBoolean1Int}) == 1 }} ui-icon-check {{/if}} ui-igcheckbox-small-on'></span> </span> </span> <br> <span class='rosite-rowtemplate-label' style='width: 125px;'>Title:</span> <span class='rosite-rowtemplate-value' style='width: 200px;'>${NestedProperty.Title}</span> <span class='rosite-rowtemplate-label' style='width: 125px;'>Boolean2:</span> <span class='rosite-rowtemplate-value' style='width: 100px;'> <span class='ui-state-default ui-corner-all ui-igcheckbox-small' style='display:inline-block'> <span style='display:block' class='ui-icon {{if parseInt(${NestedProperty.IsBoolean2Int}) == 1 }} ui-icon-check {{/if}} ui-igcheckbox-small-on'></span> </span> </span> <br> </div> </td></tr>
@( Html.Infragistics() .Grid(Model) .ID("igMembersPrimary") .Height("100%") .Width("100%") .PrimaryKey("MemberGUID") .RenderCheckboxes(true) .Columns( column => { column.For(x => x.MemberShortID).DataType("string"); } ) .ShowHeader(false) .RowTemplate(rowtemplate) .DataSourceUrl( Url.Action( "GetMembersByType", new RouteValueDictionary() { { "id", id }, {"type", MemberType} } ) ) .Render())
Hi Kristopher,
I see you have used sequential 'if' blocks, which is currently not supported. In your scenario you could avoid using the second 'if' by adding a checkbox instead of span and use your boolean value to set the 'checked' attribute:
<input type="checkbox" checked="${NestedProperty.IsBoolean2Int}"></input>
Let me know if this helps.
I suspected as much about the conditionals and your suggestion about using a normal checkbox will definitely suit our needs.
As a side note is there any plan on implementing multiple conditionals within in a single <td> for the rowtemplate in a future update?