Select List Dropdown Criteria

Sift can automatically populate a dropdown criterion from your Umbraco content. The matching property needs to be one of the following data types to do this.

  • Dropdown. The list is populated from the pre-values specified in the dropdown data type.
  • Checkbox list. The list is populated from the pre-values specified in the checkbox list data type.
  • Radio Button list. The list is populated from the pre-values specified in the radio button list data type.
  • Tags. The list is populated from the tags entered by the user for the specified group.
  • Content Picker. The list is populated from the content under the specified start node.
  • Media Picker. The list is populated from the media under the specified start node.
  • Multinode Treepicker. The list is populated from the content under the root node, restricted to the document types specified. Not available for Member node types.

A dropdown can be added to the Sift criteria by adding a <select> tag with no options specified. The tag needs to have a class of sift-criterion and the data-sift-match-property alias must match a property with one of the data types listed above.

@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()

        <label for="category-list">Category</label>
        <select name="category-list" id="category-list"
                class="sift-criterion"
                data-sift-match-property="category">
        </select>
        <p></p>

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

    </form>

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

</div>

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

The select list will be automatically populated, as determined by the property's data type, with the possible values for the field.

Select list dropdown filter

A default option can be included in the list by adding a data-sift-default-option attribute. This should provide the text to be displayed in the list, the value will be set to an empty string. If selected then the criterion will be ignored (that is, all of the values will be matched).

By default, where the select list is based on content, the name of the content is displayed in the dropdown. This can be changed by defining another property in a data-sift-criterion-display-property attribute on the <select> tag.

Where the select list is based on content, the order of the values in the list will be determined by the order of the content in Umbraco. This can be changed by including a data-sift-criterion-sort-by attribute, which specifies the property names and order ("asc" or "desc") by which the list should be sorted.

<select name="category-list" id="category-list"
        class="sift-criterion"
        data-sift-match-property="category"
        data-sift-default-option="Please select"
        data-sift-criterion-sort-by="nodeName desc">
</select>

Select list dropdown in reverse order

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.

Multi Select List

You can specify that the select list can have multiple items selected by adding the multiple attribute as usual.

By default, if more than one item is selected then any content matching any of the items 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 items selected will be returned (a logical AND).

<< Back to User Guide