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?
Unfortunately I need to mark this as 'not an answered'.
After testing and refreshing my memory on the HTML5 checkbox you cant simply set its 'checked' property by using:
<input type="checkbox" checked="${NestedProperty.IsBoolean2Int}">
The value of the checked attribute is irrelevant, as long as it is present, the box will be checked. Therefore, it would be necessary to have conditionals for each checkbox in order to properly set it.
Hello Kristopher,
Thank you for sharing your solution with the community.
I would suggest you to submit a new product idea for implementing multiple conditional blocks in a template. You can suggest new product ideas at http://ideas.infragistics.com
If you have any other questions or concerns, please let me know.
I have a workaround where the conditionals aren't necessary, but makes the solution much less elegant. I moved the conditional and generation of the checkbox from the template engine to the Model property itself.
public string IsBooleanPropertyCheckbox{ get {
string returnString = "<span class='ui-state-default ui-corner-all ui-igcheckbox-small' style='display:inline-block'>" + "<span style='display:block' class='ui-icon ui-icon-check ui-igcheckbox-small-on'></span>" + "</span>";
if (!this.IsBooleanProperty) returnString = returnString.Replace(" ui-icon-check ", string.Empty);
return returnString; } set { } }
I then use the template property trick where you can have the string value produced by the property display as html in the rowtemplate
{{html NestedProperty.IsBooleanPropertyCheckbox}}
Not elegant as it boths defeats the purpose of separating code from view and doesn't use the conditionals in the template engine, but now I have appropriatly valued checkboxes in my nested block