QdtFilter.md

QdtFilter: Dropdown or List Filter Component

• This component creates a custom filter dropdown. If cols is defined, qListObjectDef will be ignored.

Properties

prop	type	description
cols	Array	see here
qListObjectDef	Object	see here
single	Boolean	Default false. For single selections
placeholder	String	Default DropDown
expanded	Boolean	Default false. For a list-like menu instead of a dropdown
expandedHorizontal	Boolean	Default false. For a horizontal menu
expandedHorizontalSense	Boolean	Default true. For a Qlik Sense-style selections look and feel; false for regular tabs
autoSortByState	Number	Default 1. see here

Code

Vanilla JavaScript

• See the HTML Template for the basic page setup.

var options = {
  config: { /* host, port, appid, etc. */ },
  connections: { /* vizApi, engineAPI */}
}

var qdtComponents = new QdtComponents(options.config, options.connections);

var element = document.getElementById('qdt1');

qdtComponents.render(
  "QdtFilter", 
  {
    cols: ['Case Owner Group'],
    placeholder: 'Case Owner Group',
    single: true,
    autoSortByState: 0,
    showStateInDropdown: true,
  }, 
  element
);

React

<QdtComponent
  type="QdtFilter"
  props={{
    cols: ['Case Owner Group'],
    placeholder: 'Case Owner Group',
    single: true,
    autoSortByState: 0,
    showStateInDropdown: true,
  }}
/>

Angular

// qdt-filter.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'qdt-filter',
  templateUrl: './qdt-filter.component.html',
})
export class QdtFilterComponent implements OnInit {

  constructor(private el: ElementRef) { }

  chart_options = {
    type: 'QdtFilter',
    props: {
      cols: ['Case Owner Group'],
      placeholder: 'Case Owner Group',
      single: true,
      autoSortByState: 0,
      showStateInDropdown: true,
    },
  };

  ngOnInit() {

  }

}

<!-- html -->
<qdt-filter [Component]="chart_options.type" [props]="chart_options.props"></qdt-filter>

Examples

• https://qdt-apps.qlik.com/qdt-components/react/#/filters (React)

---

← Back to All Components