The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection. In contrast to the Select component, the Combo component displays all options in a virtualized list of items, meaning the combo box can simultaneously show thousands of options, where one or more options can be selected. Additionally, users can create custom item templates, allowing for robust data visualization. The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more.

Type Parameters

Hierarchy

Hierarchy

  • Component<P & Omit<React.HTMLAttributes<HTMLElement>, keyof P>, {}>
    • IgrCombo

Constructors

  • Type parameters

    Type Parameters

    Parameters

    • props: P & Omit<HTMLAttributes<HTMLElement>, keyof P>

    Returns IgrCombo<P>

Properties

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>> & Readonly<{
    children?: ReactNode;
}>
refs: {
    [key: string]: ReactInstance;
}

Type declaration

  • [key: string]: ReactInstance
state: Readonly<{}>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Accessors

  • get autofocus(): boolean
  • The autofocus attribute of the control.

    Returns boolean

  • set autofocus(v): void
  • Parameters

    • v: boolean

    Returns void

  • get autofocusList(): boolean
  • Focuses the list of options when the menu opens.

    Returns boolean

  • set autofocusList(v): void
  • Parameters

    • v: boolean

    Returns void

  • get caseSensitiveIcon(): boolean
  • Enables the case sensitive search icon in the filtering input.

    Returns boolean

  • set caseSensitiveIcon(v): void
  • Parameters

    • v: boolean

    Returns void

  • get closed(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set closed(ev): void
  • Parameters

    Returns void

  • get closing(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set closing(ev): void
  • Parameters

    Returns void

  • get data(): any[]
  • The data source used to generate the list of options.

    Returns any[]

  • set data(v): void
  • Parameters

    • v: any[]

    Returns void

  • get disableFiltering(): boolean
  • Disables the filtering of the list of options.

    Returns boolean

  • set disableFiltering(v): void
  • Parameters

    • v: boolean

    Returns void

  • get disabled(): boolean
  • The disabled state of the component

    Returns boolean

  • set disabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get displayKey(): string
  • The key in the data source used to display items in the list.

    Returns string

  • set displayKey(v): void
  • Parameters

    • v: string

    Returns void

  • get focus(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set focus(ev): void
  • Parameters

    Returns void

  • get groupHeaderTemplate(): FunctionComponent<{
        dataContext: any;
    }> | Component<{
        dataContext: any;
    }, {}, any>
  • Returns FunctionComponent<{
        dataContext: any;
    }> | Component<{
        dataContext: any;
    }, {}, any>

  • set groupHeaderTemplate(v): void
  • Parameters

    • v: FunctionComponent<{
          dataContext: any;
      }> | Component<{
          dataContext: any;
      }, {}, any>

    Returns void

  • get groupKey(): string
  • The key in the data source used to group items in the list.

    Returns string

  • set groupKey(v): void
  • Parameters

    • v: string

    Returns void

  • get groupSorting(): GroupingDirection
  • Sorts the items in each group by ascending or descending order.

    Returns GroupingDirection

  • set groupSorting(v): void
  • Parameters

    Returns void

  • get invalid(): boolean
  • Control the validity of the control.

    Returns boolean

  • set invalid(v): void
  • Parameters

    • v: boolean

    Returns void

  • get itemTemplate(): FunctionComponent<{
        dataContext: any;
    }> | Component<{
        dataContext: any;
    }, {}, any>
  • Returns FunctionComponent<{
        dataContext: any;
    }> | Component<{
        dataContext: any;
    }, {}, any>

  • set itemTemplate(v): void
  • Parameters

    • v: FunctionComponent<{
          dataContext: any;
      }> | Component<{
          dataContext: any;
      }, {}, any>

    Returns void

  • get label(): string
  • The label attribute of the control.

    Returns string

  • set label(v): void
  • Parameters

    • v: string

    Returns void

  • get name(): string
  • The name attribute of the control.

    Returns string

  • set name(v): void
  • Parameters

    • v: string

    Returns void

  • get nativeElement(): HTMLElement
  • Returns HTMLElement

  • get open(): boolean
  • Sets the open state of the component.

    Returns boolean

  • set open(v): void
  • Parameters

    • v: boolean

    Returns void

  • get opened(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set opened(ev): void
  • Parameters

    Returns void

  • get opening(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set opening(ev): void
  • Parameters

    Returns void

  • get outlined(): boolean
  • The outlined attribute of the control.

    Returns boolean

  • set outlined(v): void
  • Parameters

    • v: boolean

    Returns void

  • get placeholder(): string
  • The placeholder attribute of the control.

    Returns string

  • set placeholder(v): void
  • Parameters

    • v: string

    Returns void

  • get placeholderSearch(): string
  • The placeholder attribute of the search input.

    Returns string

  • set placeholderSearch(v): void
  • Parameters

    • v: string

    Returns void

  • get required(): boolean
  • Makes the control a required field in a form context.

    Returns boolean

  • set required(v): void
  • Parameters

    • v: boolean

    Returns void

  • get selection(): any[]
  • Returns the current selection as an array of objects as provided in the data source.

    Returns any[]

  • get singleSelect(): boolean
  • Enables single selection mode and moves item filtering to the main input.

    Returns boolean

  • set singleSelect(v): void
  • Parameters

    • v: boolean

    Returns void

  • get value(): any[]
  • Returns any[]

  • set value(v): void
  • Parameters

    • v: any[]

    Returns void

  • get valueKey(): string
  • The key in the data source used when selecting items.

    Returns string

  • set valueKey(v): void
  • Parameters

    • v: string

    Returns void

Methods

  • Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.

    Calling Component#setState generally does not trigger this method.

    This method will not stop working in React 17.

    Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.

    Parameters

    • nextProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • nextContext: any

    Returns void

  • Removes focus from the component.

    Returns void

  • Checks for validity of the control and emits the invalid event if it invalid.

    Returns void

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Returns void

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>
    • Optional snapshot: any

    Returns void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

  • Returns void

  • Parameters

    • items: any[]

    Returns void

  • Parameters

    • name: string

    Returns any

  • Sets focus on the component.

    Parameters

    Returns void

  • Parameters

    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>

    Returns any

  • Hides the list of options.

    Returns boolean

  • Returns DOMElement<{
        children: any[];
        class: (P & Omit<HTMLAttributes<HTMLElement>, keyof P>)["className"];
        id: (P & Omit<HTMLAttributes<HTMLElement>, keyof P>)["id"];
        ref: ((ref) => void);
        style: {};
    }, any>

  • Checks for validity of the control and shows the browser message if it invalid.

    Returns void

  • Parameters

    • items: any[]

    Returns void

  • Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns void

  • Parameters

    • element: any

    Returns void

  • Type parameters

    Type Parameters

    • K extends never

    Parameters

    • state: {} | ((prevState, props) => {} | Pick<{}, K>) | Pick<{}, K>
    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean

  • Shows the list of options.

    Returns boolean

  • Toggles the list of options.

    Returns boolean