Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
116 lines (88 sloc) 3.64 KB

QdtFilter: Dropdown or List Filter Component

QdtFilter

  • 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

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


← Back to All Components

You can’t perform that action at this time.