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

QdtSearch: Create a Search Input Field

QdtSearch

Properties

prop type description
cols Array [dimension]
invert Boolean false
placeholder String Search for
tooltipDock String 'top', 'right', 'bottom', 'left'
tooltipContent String <h5>Tooltip Header</h5> more content here.
showGo Boolean false

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(
  "QdtSearch", 
  {
    cols: ['Case Owner'],
    options: {
      placeholder: 'Search Case Owner' 
    }
  }, 
  element
);

React

<QdtComponent
  type='QdtSearch'
  props={{
    cols: ['Case Owner'],
    options: {
      placeholder: 'Search Case Owner' 
    }
  }}
/>

Angular

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

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

  constructor(private el: ElementRef) { }

  chart_options = {
    type: 'QdtSearch',
    props: {
      cols: ['Case Owner'],
      options: {
        placeholder: 'Search Case Owner' 
      }
    },
  };

  ngOnInit() {

  }

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

Examples


← Back to All Components

You can’t perform that action at this time.