Stuart Mullinger

Checkbox List Criteria

/ Home / Projects / Sift / User Guide

In a similar manner to Select Lists, other list types can be used as criteria and automatically populated from your Umbraco content.

Checkbox List

A checkbox list can be added as a criterion by adding a <div> tag with the sift-checkboxes class added. The checkboxes will be automatically created based on the matching Umbraco property.

@inherits Umbraco.Web.Mvc.UmbracoViewPage

<h1>Select List Dropdown Filter</h1>

<div class="sift"
     data-sift-result-document-type="projectPage">

    <form class="sift-criteria">

        @Html.AntiForgeryToken()

        <p>Category</p>
        <div name="checkbox-list" id="checkbox-list"
             class="sift-criterion sift-checkboxes"
             data-sift-match-property="category">
        </div>

        <p></p>

        <input type="submit" value="Search" />

    </form>

    <div class="sift-result">
    </div>

</div>

<script src="~/Scripts/sift.js" type="text/javascript"></script>

Checkbox list

The label position can be changed by adding a data-sift-label-placement attribute to the criterion div. This can be set to before, after or none.

In the same way as Select Lists, the order of the checkboxes can be changed by using the data-sift-criterion-sort-by attribute and another property specified to be displayed (rather than the node name) by using the data-sift-criterion-display-property.

By default, if more than one checkbox is selected then any content matching any of the checkboxes selected will be returned (a logical OR). You can include the sift-multi-all-selected class to change this behaviour. In that case only content matching all of the checkboxes selected will be returned (a logical AND).

In the above example each label and checkbox is created within its own <div> element. If, instead of using a <div> element, you use a <ul> element for the criterion then the checkboxes will be created within <li> elements, allowing you to use an unordered list if preferred.

@inherits Umbraco.Web.Mvc.UmbracoViewPage

<h1>Checkbox list</h1>

<div class="sift"
     data-sift-result-document-type="projectPage">

    <form class="sift-criteria">

        @Html.AntiForgeryToken()

        <p>Category</p>
        <ul name="checkbox-list" id="checkbox-list"
             class="sift-criterion sift-checkboxes sift-multi-all-selected"
             data-sift-match-property="category"
             data-sift-label-placement="before"
             data-sift-criterion-sort-by="nodeName desc">
        </ul>

        <p></p>

        <input type="submit" value="Search" />

    </form>

    <div class="sift-result">
    </div>

</div>

<script src="~/Scripts/sift.js" type="text/javascript"></script>

Checkbox list with extra attributes

To stop the automatic population of the list you can add the sift-populated class to the criterion. In this case you will need to create the options in the view manually.

<< Back to User Guide