Filter Item

Published on February 18, 2021, updated on March 07, 2022

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="insSelect"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>

<script>
  const insSelect = document.getElementById('insSelect')
  insSelect.addEventListener('insSelect', 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
insSelect	stateFrom, stateTo	Execute a script when a filter item has been selected

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.