Show an empty grid when filtering by members that do not exist in the dataset

Slice configuration

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>
    Show an empty grid when filtering by members that do not exist in the
    dataset
  </h2>
  <p>
    By default, if you apply the
    <a
      href="https://www.flexmonster.com/doc/filter-by-selection/"
      target="_blank"
    >selection filter</a> only with members that do not exist in the dataset, 
    the filter will be ignored, and all the field members will be displayed.
  </p>
  <p>
    In this example, this behavior is changed by combining the conditional and
    selection filters. Use this approach if you need to show an empty grid when
    filtering by members that might not exist.
    <a
      href="https://www.flexmonster.com/doc/advanced-tips-filtering/#show-empty-grid-when-filtering-by-non-existent-members"
      target="_blank"
    >Read more details in Flexmonster docs</a>.
  </p>
  <p>
    If you are using the <code>"json"</code> or <code>"csv"</code> data source
    type, you can change the behavior by setting the
    <a
      href="https://www.flexmonster.com/api/options-object/#filter-allowemptymembersfilter"
      target="_blank"
    >filter.allowEmptyMembersFilter</a> option to <code>true</code>.
    <a href="https://jsfiddle.net/flexmonster/vkthmug4/" target="_blank"
    >See an example on JSFiddle</a>.
  </p>
  <p>
    Use the buttons below to switch between the approaches and see the
    difference.
  </p>
</div>

<button onclick="setSelectionFilter()">Selection filter</button>
<button onclick="setCombinedFilters()">Combined filters</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  report: {
    dataSource: {
      "filename": "https://cdn.flexmonster.com/data/data.csv"
    },
    slice: {
      rows: [{
        "uniqueName": "Category",
      }],
      columns: [{
        "uniqueName": ["Measures"]
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "Sum"
      }]
    }
  }
});

function setSelectionFilter(){
	pivot.setFilter("Category", {
    members: ["Computers", "Phones"]
  });
}

function setCombinedFilters(){
	pivot.setFilter("Category", {
    include: ["Computers", "Phones"],
    query: { "equal": "" }
  });
}