Insites Docs Web Components V2Data DisplayFilter Item

Filter Item

Published on February 18, 2021, updated on June 01, 2021

Element: <ins-filter-item>

Displays dropdown items of ins-filter.

Complete Example

Code Snippet

<ins-filter 
  with-date-filter 
  Date-title="Date Period"
  tooltip="This is a sample tooltip content. It also support html content.">

	<ins-filter-item
	name="Operating System"
	options='["Windows", "macOS", "Linux"]'>
	</ins-filter-item>

</ins-filter>
Default State

Code Snippet

<ins-filter>

  <ins-filter-item></ins-filter-item>

</ins-filter>
Direct Set Data

Code Snippet

  <ins-filter>

    <ins-filter-item 
      id="directSetDataFilterItem">
    </ins-filter-item>
 
 </ins-filter>

  <script>
    var filter = document.getElementById('directSetDataFilterItem');
    filter.addEventListener('didLoad', function(e) {
      var options = ["CEO", "Manager"];
      filter.name = 'Position';
      filter.options = options;
    });
  </script>
Static Data Source

Code Snippet

<ins-filter>

  <ins-filter-item
    name="Operating System"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>

</ins-filter>
Static Data Source

Code Snippet

<ins-filter>
  <ins-filter-item
    name="Operating System"
    id="onFilter"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>

<script>
  const onFilter = document.getElementById('onFilter')
  onFilter.addEventListener('onFilter', event => {
  console.log(event.detail.name);
  console.log(event.detail.option);
  alert("Hello! I am an alert box!!");
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
name string "Category Label" any Defines name of filter items
options string/array ["Category 1", "Category 2", "Category 3"] any Defines item options
selected string any any Defines selected option

 

Events

 

EVENT OBJECT DESCRIPTION
onFilter stateFrom, stateTo Execute a script when a filter item has been selected

 

Have a suggestion for this page?

Send your suggestions using this form.