Welcome to the Learning Center

The Guide | Knowledge Base | FAQ

Browse it all or refine your selection using the filters below on the left.

How to Replace Boolean (True/False) fields with Checkboxes in your ItemTemplate or DetailTemplate

As coders, programmers, developers, or database admins, we are all too comfortable viewing the values of Boolean fields as either True or False. However, end users of our website may prefer to see a checked or unchecked box in the ItemTemplate or DetailTemplate of our page for these Boolean fields.

By: Steve Krantzman On: 12/14/2018

Link to this Article
https://dnndev.com/Learn/Guide/Article/How-to-Replace-Boolean-fields-with-Checkboxes-in-ItemTemplate-or-DetailTemplate

When viewing a long list of records with multiple Boolean fields, many end users find it easier to decipher when the Boolean values are represented as checkboxes rather than True/False values.  Not only does a checkbox take up less space than its text equivalent, it is also what the end user sees for these same fields, when adding or editing records.  So why not just use checkboxes instead?

While it is very easy for us to place checkbox controls in our Add or Edit forms, there is not an equivalent template control for placing checkbox controls in either the ItemTemplate or DetailTemplate. One of the great benefits for me to using XMod Pro is that it has really helped hone my SQL skills.  So, I turned to SQL for a solution. You simply add a CASE statement to your ListDataSource or DetailDataSource’s CommandText property to return ‘Checked’ for a field’s true value and ‘’ for a field’s false value.  You then use the resulting FieldToken as the “Checked” property of an html input tag of the checkbox type.  Be sure to disable the checkbox as you don’t want the end user to think they can edit that field in the template view.

When I ran this article by Kelly, he recommended that I also include an alternative method to achieve the same task using the XMP <xmod:Select> control.  In his words, there is more than one way to skin a cat, and I agree. Although they both use the same logic of CASE, you may prefer one method over the other. Below, I use the SQL method for the ItemTemplate, and the XMP <xmod:Select> method for the DetailTemplate.

In the example, I use dnn's vw_Users view, so you can copy and pate the code below into a template to check it out.

<xmod:Template UsePaging="True" Ajax="False">
  <ListDataSource CommandText="SELECT [UserId], [Username], [FirstName], [LastName],
                               IsSuperUser_CK = CASE [IsSuperUser] WHEN 'True' Then 'Checked' ELSE '' END,
                               IsDeleted_CK = CASE [IsDeleted] WHEN 'True' Then 'Checked' ELSE '' END
                               FROM vw_Users"/>
  <DetailDataSource CommandText="SELECT  [Username], [FirstName], [LastName], [DisplayName], [Email], [IsSuperUser], [IsDeleted] FROM vw_Users WHERE [UserId] = @UserId">
    <Parameter Name="UserId" />
  </DetailDataSource>
  <HeaderTemplate>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>User Id</th>
          <th>Username</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Is SuperUser</th>
          <th>Is Deleted</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
  </HeaderTemplate>
  <ItemTemplate>
        <tr>
          <td>[[UserId]]</td>
          <td>[[Username]]</td>
          <td>[[FirstName]]</td>
          <td>[[LastName]]</td>
          <td><input type="checkbox" disabled="disabled" [[IsSuperUser_CK]]/></td>
          <td><input type="checkbox" disabled="disabled" [[IsDeleted_CK]]/></td>
          <td>
            <xmod:DetailLink Text="Details">
              <Parameter Name="UserId" Value='[[UserId]]' />
            </xmod:DetailLink>
          </td>
        </tr>
  </ItemTemplate>
  <FooterTemplate>
      </tbody>
    </table>
  </FooterTemplate>
  <DetailTemplate>
    <strong>Username</strong> [[Username]]<br />
    <strong>FirstName</strong> [[FirstName]]<br />
    <strong>LastName</strong> [[LastName]]<br />
    <strong>DisplayName</strong> [[DisplayName]]<br />
    <strong>IsSuperUser</strong> 
    <xmod:Select Mode="Standard">
      <Case CompareType="Boolean" Value='[[IsSuperUser]]' Expression="True" Operator="=" IgnoreCase="True">
        <input type="checkbox" disabled="disabled" checked />
      </Case>
      <Else>
        <input type="checkbox" disabled="disabled" />
      </Else> </xmod:Select><br />
    <strong>IsDeleted</strong> 
    <xmod:Select Mode="Standard">
      <Case CompareType="Boolean" Value='[[IsDeleted]]' Expression="True" Operator="=" IgnoreCase="True">
        <input type="checkbox" disabled="disabled" checked />
      </Case>
      <Else>
        <input type="checkbox" disabled="disabled" />
      </Else> </xmod:Select><br />    
    <strong>Email</strong> [[Email]]<br />
    <xmod:ReturnLink CssClass="dnnSecondaryAction" Text="&lt;&lt; Return" />
  </DetailTemplate>
</xmod:Template>

I hope you find this useful and enjoy!