Use the pivot filter control

Last Update: 9/26/2016

This page shows how to use a pivot filter control.

Basic usage

This sample shows basic usage of a pivot filter. Please try to use html markup below since it picks up necessary styles from hub-pivot and filters classes.

  <div class="hub-pivot">
    <div class="filters filter-container"></div>
  </div>

  <div class="log"></div>
  import Controls = require("VSS/Controls");
  import Navigation = require("VSS/Controls/Navigation");

  var container = $(".filter-container");

  Controls.create(Navigation.PivotFilter, container, {
    behavior: "dropdown",
    text: "My Filter",
    items: [
      { id: "v-1", text: "Value 1", value: "v1" },
      { id: "v-2", text: "Value 2", value: "v2", selected: true },
      { id: "v-3", text: "Value 3", value: "v3" }
    ],
    change: function(item) {
      var $log = $(".log"); 
      $log.html(`${$log.html()}<p>Filter changed to ${item.text} (${item.value})</p>`);
    }
  });