Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcGridComponent

Grid provides a way to present and manipulate tabular data.

Igx Module

IgxGridModule

Igx Group

Grids & Lists

Igx Keywords

grid, table

Igx Theme

igx-grid-theme

Remarks

The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data has been bound, it can be manipulated through filtering, sorting & editing operations.

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgcGridComponent(...args): IgcGridComponent

  • Parameters

    • ...args: any[]

    Returns IgcGridComponent

Properties

ReadonlyATTRIBUTE_NODE

ATTRIBUTE_NODE: number

ReadonlyCDATA_SECTION_NODE

CDATA_SECTION_NODE: number

node is a CDATASection node.

ReadonlyCOMMENT_NODE

COMMENT_NODE: number

node is a Comment node.

ReadonlyDOCUMENT_FRAGMENT_NODE

DOCUMENT_FRAGMENT_NODE: number

node is a DocumentFragment node.

ReadonlyDOCUMENT_NODE

DOCUMENT_NODE: number

node is a document.

ReadonlyDOCUMENT_POSITION_CONTAINED_BY

DOCUMENT_POSITION_CONTAINED_BY: number

Set when other is a descendant of node.

ReadonlyDOCUMENT_POSITION_CONTAINS

DOCUMENT_POSITION_CONTAINS: number

Set when other is an ancestor of node.

ReadonlyDOCUMENT_POSITION_DISCONNECTED

DOCUMENT_POSITION_DISCONNECTED: number

Set when node and other are not in the same tree.

ReadonlyDOCUMENT_POSITION_FOLLOWING

DOCUMENT_POSITION_FOLLOWING: number

Set when other is following node.

ReadonlyDOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number

ReadonlyDOCUMENT_POSITION_PRECEDING

DOCUMENT_POSITION_PRECEDING: number

Set when other is preceding node.

ReadonlyDOCUMENT_TYPE_NODE

DOCUMENT_TYPE_NODE: number

node is a doctype.

ReadonlyELEMENT_NODE

ELEMENT_NODE: number

node is an element.

ReadonlyENTITY_NODE

ENTITY_NODE: number

ReadonlyENTITY_REFERENCE_NODE

ENTITY_REFERENCE_NODE: number

ReadonlyNOTATION_NODE

NOTATION_NODE: number

ReadonlyPROCESSING_INSTRUCTION_NODE

PROCESSING_INSTRUCTION_NODE: number

node is a ProcessingInstruction node.

ReadonlyTEXT_NODE

TEXT_NODE: number

node is a Text node.

accessKey

accessKey: string

ReadonlyaccessKeyLabel

accessKeyLabel: string

ariaAtomic

ariaAtomic: string

ariaAutoComplete

ariaAutoComplete: string

ariaBusy

ariaBusy: string

ariaChecked

ariaChecked: string

ariaColCount

ariaColCount: string

ariaColIndex

ariaColIndex: string

ariaColIndexText

ariaColIndexText: string

ariaColSpan

ariaColSpan: string

ariaCurrent

ariaCurrent: string

ariaDisabled

ariaDisabled: string

ariaExpanded

ariaExpanded: string

ariaHasPopup

ariaHasPopup: string

ariaHidden

ariaHidden: string

ariaInvalid

ariaInvalid: string

ariaKeyShortcuts

ariaKeyShortcuts: string

ariaLabel

ariaLabel: string

ariaLevel

ariaLevel: string

ariaLive

ariaLive: string

ariaModal

ariaModal: string

ariaMultiLine

ariaMultiLine: string

ariaMultiSelectable

ariaMultiSelectable: string

ariaOrientation

ariaOrientation: string

ariaPlaceholder

ariaPlaceholder: string

ariaPosInSet

ariaPosInSet: string

ariaPressed

ariaPressed: string

ariaReadOnly

ariaReadOnly: string

ariaRequired

ariaRequired: string

ariaRoleDescription

ariaRoleDescription: string

ariaRowCount

ariaRowCount: string

ariaRowIndex

ariaRowIndex: string

ariaRowIndexText

ariaRowIndexText: string

ariaRowSpan

ariaRowSpan: string

ariaSelected

ariaSelected: string

ariaSetSize

ariaSetSize: string

ariaSort

ariaSort: string

ariaValueMax

ariaValueMax: string

ariaValueMin

ariaValueMin: string

ariaValueNow

ariaValueNow: string

ariaValueText

ariaValueText: string

ReadonlyassignedSlot

assignedSlot: HTMLSlotElement

Readonlyattributes

attributes: NamedNodeMap

autocapitalize

autocapitalize: string

autofocus

autofocus: boolean

ReadonlybaseURI

baseURI: string

Returns node's node document's document base URL.

ReadonlychildElementCount

childElementCount: number

ReadonlychildNodes

childNodes: NodeListOf<ChildNode>

Returns the children.

Readonlychildren

children: HTMLCollection

Returns the child elements.

ReadonlyclassList

classList: DOMTokenList

Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object.

className

className: string

Returns the value of element's class content attribute. Can be set to change it.

ReadonlyclientHeight

clientHeight: number

ReadonlyclientLeft

clientLeft: number

ReadonlyclientTop

clientTop: number

ReadonlyclientWidth

clientWidth: number

contentEditable

contentEditable: string

Readonlydataset

dataset: DOMStringMap

dir

dir: string

draggable

draggable: boolean

enterKeyHint

enterKeyHint: string

ReadonlyfirstChild

firstChild: ChildNode

Returns the first child.

ReadonlyfirstElementChild

firstElementChild: Element

Returns the first child that is an element, and null otherwise.

hidden

hidden: boolean

inert

inert: boolean

innerHTML

innerHTML: string

innerText

innerText: string

inputMode

inputMode: string

ReadonlyisConnected

isConnected: boolean

Returns true if node is connected and false otherwise.

ReadonlyisContentEditable

isContentEditable: boolean

lang

lang: string

ReadonlylastChild

lastChild: ChildNode

Returns the last child.

ReadonlylastElementChild

lastElementChild: Element

Returns the last child that is an element, and null otherwise.

ReadonlylocalName

localName: string

Returns the local name.

ReadonlynamespaceURI

namespaceURI: string

Returns the namespace.

ReadonlynextElementSibling

nextElementSibling: Element

Returns the first following sibling that is an element, and null otherwise.

ReadonlynextSibling

nextSibling: ChildNode

Returns the next sibling.

ReadonlynodeName

nodeName: string

Returns a string appropriate for the type of node.

ReadonlynodeType

nodeType: number

Returns the type of node.

nodeValue

nodeValue: string

Optionalnonce

nonce?: string

ReadonlyoffsetHeight

offsetHeight: number

ReadonlyoffsetLeft

offsetLeft: number

ReadonlyoffsetParent

offsetParent: Element

ReadonlyoffsetTop

offsetTop: number

ReadonlyoffsetWidth

offsetWidth: number

onabort

onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any)

Fires when the user aborts the download.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: UIEvent

        The event.

      Returns any

onanimationcancel

onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

onanimationend

onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

onanimationiteration

onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

onanimationstart

onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

onauxclick

onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

onbeforeinput

onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: InputEvent

      Returns any

onblur

onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any)

Fires when the object loses the input focus.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: FocusEvent

        The focus event.

      Returns any

oncancel

oncancel: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oncanplay

oncanplay: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when playback is possible, but would require further buffering.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

oncanplaythrough

oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onchange

onchange: ((this: GlobalEventHandlers, ev: Event) => any)

Fires when the contents of the object or selection have changed.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onclick

onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user clicks the left mouse button on the object

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onclose

onclose: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oncontextmenu

oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user clicks the right mouse button in the client area, opening the context menu.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

oncopy

oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

oncuechange

oncuechange: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oncut

oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

ondblclick

ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user double-clicks the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

ondrag

ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the source object continuously during a drag operation.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The event.

      Returns any

ondragend

ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the source object when the user releases the mouse at the close of a drag operation.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The event.

      Returns any

ondragenter

ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the target element when the user drags the object to a valid drop target.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The drag event.

      Returns any

ondragleave

ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The drag event.

      Returns any

ondragover

ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the target element continuously while the user drags the object over a valid drop target.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The event.

      Returns any

ondragstart

ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Fires on the source object when the user starts to drag a text selection or selected object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

        The event.

      Returns any

ondrop

ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

      Returns any

ondurationchange

ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the duration attribute is updated.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onemptied

onemptied: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the media element is reset to its initial state.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onended

onended: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the end of playback is reached.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event

      Returns any

onerror

onerror: OnErrorEventHandlerNonNull

Fires when an error occurs during object loading.

Param: ev

The event.

onfocus

onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any)

Fires when the object receives focus.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: FocusEvent

        The event.

      Returns any

onformdata

onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: FormDataEvent

      Returns any

onfullscreenchange

onfullscreenchange: ((this: Element, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: Element
      • ev: Event

      Returns any

onfullscreenerror

onfullscreenerror: ((this: Element, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: Element
      • ev: Event

      Returns any

ongotpointercapture

ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

oninput

oninput: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oninvalid

oninvalid: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onkeydown

onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

Fires when the user presses a key.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: KeyboardEvent

        The keyboard event

      Returns any

onkeypress

onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

Fires when the user presses an alphanumeric key.

Deprecated

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: KeyboardEvent

        The event.

      Returns any

onkeyup

onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any)

Fires when the user releases a key.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: KeyboardEvent

        The keyboard event

      Returns any

onload

onload: ((this: GlobalEventHandlers, ev: Event) => any)

Fires immediately after the browser loads the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onloadeddata

onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when media data is loaded at the current playback position.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onloadedmetadata

onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the duration and dimensions of the media have been determined.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onloadstart

onloadstart: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when Internet Explorer begins looking for media data.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onlostpointercapture

onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onmousedown

onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user clicks the object with either mouse button.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onmouseenter

onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

onmouseleave

onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

onmousemove

onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user moves the mouse over the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onmouseout

onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user moves the mouse pointer outside the boundaries of the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onmouseover

onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user moves the mouse pointer into the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onmouseup

onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any)

Fires when the user releases a mouse button while the mouse is over the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

        The mouse event.

      Returns any

onpaste

onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

onpause

onpause: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when playback is paused.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onplay

onplay: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the play method is requested.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onplaying

onplaying: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the audio or video has started playing.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onpointercancel

onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerdown

onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerenter

onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerleave

onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointermove

onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerout

onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerover

onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onpointerup

onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onprogress

onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any)

Occurs to indicate progress while downloading media data.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: ProgressEvent<EventTarget>

        The event.

      Returns any

onratechange

onratechange: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the playback rate is increased or decreased.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onreset

onreset: ((this: GlobalEventHandlers, ev: Event) => any)

Fires when the user resets a form.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onresize

onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: UIEvent

      Returns any

onscroll

onscroll: ((this: GlobalEventHandlers, ev: Event) => any)

Fires when the user repositions the scroll box in the scroll bar on the object.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onsecuritypolicyviolation

onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: SecurityPolicyViolationEvent

      Returns any

onseeked

onseeked: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the seek operation ends.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onseeking

onseeking: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the current playback position is moved.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onselect

onselect: ((this: GlobalEventHandlers, ev: Event) => any)

Fires when the current selection changes.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onselectionchange

onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onselectstart

onselectstart: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onslotchange

onslotchange: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onstalled

onstalled: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the download has stopped.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onsubmit

onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: SubmitEvent

      Returns any

onsuspend

onsuspend: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs if the load operation has been intentionally halted.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

ontimeupdate

ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs to indicate the current playback position.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

ontoggle

ontoggle: ((this: GlobalEventHandlers, ev: Event) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

Optionalontouchcancel

ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

Optionalontouchend

ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

Optionalontouchmove

ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

Optionalontouchstart

ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

ontransitioncancel

ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

ontransitionend

ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

ontransitionrun

ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

ontransitionstart

ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

onvolumechange

onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when the volume is changed, or playback is muted or unmuted.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onwaiting

onwaiting: ((this: GlobalEventHandlers, ev: Event) => any)

Occurs when playback stops because the next frame of a video resource is not available.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onwebkitanimationend

onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any)

Deprecated

This is a legacy alias of onanimationend.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onwebkitanimationiteration

onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any)

Deprecated

This is a legacy alias of onanimationiteration.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onwebkitanimationstart

onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any)

Deprecated

This is a legacy alias of onanimationstart.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onwebkittransitionend

onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any)

Deprecated

This is a legacy alias of ontransitionend.

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onwheel

onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any)

Type declaration

    • (this, ev): any

    • Parameters

      • this: GlobalEventHandlers
      • ev: WheelEvent

      Returns any

outerHTML

outerHTML: string

outerText

outerText: string

ReadonlyownerDocument

ownerDocument: Document

Returns the node document. Returns null for documents.

ReadonlyparentElement

parentElement: HTMLElement

Returns the parent element.

ReadonlyparentNode

parentNode: ParentNode

Returns the parent.

Readonlypart

part: DOMTokenList

Readonlyprefix

prefix: string

Returns the namespace prefix.

ReadonlypreviousElementSibling

previousElementSibling: Element

Returns the first preceding sibling that is an element, and null otherwise.

ReadonlypreviousSibling

previousSibling: ChildNode

Returns the previous sibling.

role

role: string

ReadonlyscrollHeight

scrollHeight: number

scrollLeft

scrollLeft: number

scrollTop

scrollTop: number

ReadonlyscrollWidth

scrollWidth: number

ReadonlyshadowRoot

shadowRoot: ShadowRoot

Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise.

slot

slot: string

Returns the value of element's slot content attribute. Can be set to change it.

spellcheck

spellcheck: boolean

Readonlystyle

style: CSSStyleDeclaration

tabIndex

tabIndex: number

ReadonlytagName

tagName: string

Returns the HTML-uppercased qualified name.

textContent

textContent: string

title

title: string

translate

translate: boolean

Static ReadonlytagName

tagName: string

Returns the HTML-uppercased qualified name.

Accessors

actionStripComponents

  • get actionStripComponents(): IgcActionStripToken[]

  • Returns IgcActionStripToken[]

addRowEmptyTemplate

  • get addRowEmptyTemplate(): IgcRenderFunction<void>

  • Returns IgcRenderFunction<void>

  • set addRowEmptyTemplate(value): void

  • Gets/Sets a custom template for adding row UI when grid is empty.

    Example

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

    Parameters

    Returns void

advancedFilteringExpressionsTree

  • get advancedFilteringExpressionsTree(): IgcFilteringExpressionsTree

  • Returns IgcFilteringExpressionsTree

  • set advancedFilteringExpressionsTree(value): void

  • Gets/Sets the advanced filtering state.

    Example

    let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
    this.grid.advancedFilteringExpressionsTree = logic;

    Parameters

    Returns void

allowAdvancedFiltering

  • get allowAdvancedFiltering(): boolean

  • Returns boolean

  • set allowAdvancedFiltering(value): void

  • Gets/Sets a value indicating whether the advanced filtering is enabled.

    Example

    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

allowFiltering

  • get allowFiltering(): boolean

  • Returns boolean

  • set allowFiltering(value): void

  • Gets/Sets if the filtering is enabled.

    Example

    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

autoGenerate

  • get autoGenerate(): boolean

  • Returns boolean

  • set autoGenerate(value): void

  • Gets/Sets whether to auto-generate the columns.

    Remarks

    The default value is false. When set to true, it will override all columns declared through code or in markup.

    Example

    <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

autoGenerateExclude

  • get autoGenerateExclude(): string[]

  • Returns string[]

  • set autoGenerateExclude(value): void

  • Gets/Sets a list of property keys to be excluded from the generated column collection

    Remarks

    The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their hidden property.

    Example

    <igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>

    const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]

    Parameters

    • value: string[]

    Returns void

batchEditing

  • get batchEditing(): boolean

  • Returns boolean

  • set batchEditing(value): void

  • Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

    Example

    <igx-grid [batchEditing]="true" [data]="someData">
    </igx-grid>

    Parameters

    • value: boolean

    Returns void

cellSelection

  • get cellSelection(): GridSelectionMode

  • Returns GridSelectionMode

  • set cellSelection(value): void

  • Gets/Sets cell selection mode.

    Remarks

    By default the cell selection mode is multiple

    Parameters

    Returns void

clipboardOptions

  • get clipboardOptions(): IgcClipboardOptions

  • Returns IgcClipboardOptions

  • set clipboardOptions(value): void

  • Controls the copy behavior of the grid.

    Parameters

    Returns void

columnList

  • get columnList(): IgcColumnComponent[]

  • Returns IgcColumnComponent[]

columnSelection

  • get columnSelection(): GridSelectionMode

  • Returns GridSelectionMode

  • set columnSelection(value): void

  • Gets/Sets column selection mode

    Remarks

    By default the row selection mode is none

    Parameters

    Returns void

columnWidth

  • get columnWidth(): string

  • Returns string

  • set columnWidth(value): void

  • Gets/Sets the default width of the columns.

    Example

    <igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

columns

  • get columns(): IgcColumnComponent[]

  • Gets an array of IgxColumnComponents.

    Example

    const colums = this.grid.columns.

    Returns IgcColumnComponent[]

data

  • get data(): any[]

  • Returns any[]

  • set data(value): void

  • Gets/Sets the array of data that populates the component.

    Example

    <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: any[]

    Returns void

dataCloneStrategy

  • get dataCloneStrategy(): IgcDataCloneStrategy

  • Returns IgcDataCloneStrategy

  • set dataCloneStrategy(value): void

  • Gets/Sets the data clone strategy of the grid when in edit mode.

    Example

     <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>

    Parameters

    Returns void

dataRowList

  • get dataRowList(): IgcRowDirective[]

  • A list of currently rendered IgxGridRowComponent's.

    Example

    const dataList = this.grid.dataRowList;

    Returns IgcRowDirective[]

dataView

  • get dataView(): any[]

  • Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

    Example

         const dataView = this.grid.dataView;

    Returns any[]

defaultHeaderGroupMinWidth

  • get defaultHeaderGroupMinWidth(): number

  • Returns the IgxGridHeaderGroupComponent's minimum allowed width.

    Remarks

    Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

    Returns number

defaultRowHeight

  • get defaultRowHeight(): number

  • Gets the default row height.

    Example

    const rowHeigh = this.grid.defaultRowHeight;

    Returns number

detailTemplate

dragGhostCustomTemplate

  • get dragGhostCustomTemplate(): IgcRenderFunction<IgcGridRowDragGhostContext>

  • Returns IgcRenderFunction<IgcGridRowDragGhostContext>

  • set dragGhostCustomTemplate(value): void

  • Gets the custom template, if any, used for row drag ghost.

    Parameters

    Returns void

dragIndicatorIconTemplate

  • get dragIndicatorIconTemplate(): IgcRenderFunction<IgcGridEmptyTemplateContext>

  • Returns IgcRenderFunction<IgcGridEmptyTemplateContext>

  • set dragIndicatorIconTemplate(value): void

  • The custom template, if any, that should be used when rendering the row drag indicator icon

    Parameters

    Returns void

dropAreaMessage

  • get dropAreaMessage(): string

  • Returns string

  • set dropAreaMessage(value): void

  • Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.

    Remarks

    The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

    Example

    <igx-grid dropAreaMessage="Drop here to group!">
         <igx-column [groupable]="true" field="ID"></igx-column>
    </igx-grid>

    Parameters

    • value: string

    Returns void

dropAreaTemplate

  • get dropAreaTemplate(): IgcRenderFunction<void>

  • Returns IgcRenderFunction<void>

  • set dropAreaTemplate(value): void

  • Gets/Sets the template that will be rendered as a GroupBy drop area.

    Remarks

    The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

    Example

    <igx-grid [dropAreaTemplate]="dropAreaRef">
    </igx-grid>
    <ng-template #myDropArea>
         <span> Custom drop area! </span>
    </ng-template>

    Parameters

    Returns void

emptyFilteredGridMessage

  • get emptyFilteredGridMessage(): string

  • Returns string

  • set emptyFilteredGridMessage(value): void

  • Gets/Sets the message displayed when there are no records and the grid is filtered.

    Example

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

emptyGridMessage

  • get emptyGridMessage(): string

  • Returns string

  • set emptyGridMessage(value): void

  • Get/Sets the message displayed when there are no records.

    Example

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

emptyGridTemplate

  • get emptyGridTemplate(): IgcRenderFunction<void>

  • Returns IgcRenderFunction<void>

  • set emptyGridTemplate(value): void

  • Gets/Sets a custom template when empty.

    Example

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

    Parameters

    Returns void

excelStyleHeaderIconTemplate

  • get excelStyleHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>

  • Returns IgcRenderFunction<IgcGridHeaderTemplateContext>

  • set excelStyleHeaderIconTemplate(value): void

  • Gets the excel style header icon.

    Parameters

    Returns void

filterMode

  • get filterMode(): FilterMode

  • Returns FilterMode

  • set filterMode(value): void

  • Gets/Sets the filter mode.

    Example

    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>

    Remarks

    By default it's set to FilterMode.quickFilter.

    Parameters

    Returns void

filterStrategy

  • get filterStrategy(): IgcFilteringStrategy

  • Returns IgcFilteringStrategy

  • set filterStrategy(value): void

  • Gets/Sets the filtering strategy of the grid.

    Example

     <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>

    Parameters

    Returns void

filteredData

  • get filteredData(): any

  • Returns an array of objects containing the filtered data.

    Example

    let filteredData = this.grid.filteredData;

    Returns any

filteredSortedData

  • get filteredSortedData(): any[]

  • Returns an array containing the filtered sorted data.

    Example

    const filteredSortedData = this.grid1.filteredSortedData;

    Returns any[]

filteringExpressionsTree

  • get filteringExpressionsTree(): IgcFilteringExpressionsTree

  • Returns IgcFilteringExpressionsTree

  • set filteringExpressionsTree(value): void

  • Gets/Sets the filtering state.

    Example

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>

    Remarks

    Supports two-way binding.

    Parameters

    Returns void

filteringLogic

  • get filteringLogic(): FilteringLogic

  • Returns FilteringLogic

  • set filteringLogic(value): void

  • Gets/Sets the filtering logic of the IgxGridComponent.

    Remarks

    The default is AND.

    Example

    <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>

    Parameters

    Returns void

groupByRowSelectorTemplate

groupRowTemplate

groupStrategy

  • get groupStrategy(): IgcGridGroupingStrategy

  • Returns IgcGridGroupingStrategy

  • set groupStrategy(value): void

  • Gets/Sets the grouping strategy of the grid.

    Remarks

    The default IgxGrouping extends from IgxSorting and a custom one can be used as a sortStrategy as well.

    Example

     <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>

    Parameters

    Returns void

groupingExpansionState

  • get groupingExpansionState(): IgcGroupByExpandState[]

  • Returns IgcGroupByExpandState[]

  • set groupingExpansionState(value): void

  • Gets/Sets a list of expansion states for group rows.

    Remarks

    Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). Supports two-way data binding.

    Example

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>

    Parameters

    Returns void

groupingExpressions

  • get groupingExpressions(): IgcGroupingExpression[]

  • Returns IgcGroupingExpression[]

  • set groupingExpressions(value): void

  • Gets/Sets the group by state.

    Example

    let groupByState = this.grid.groupingExpressions;
    this.grid.groupingExpressions = [...];

    Remarks

    Supports two-way data binding.

    Example

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>

    Parameters

    Returns void

groupsExpanded

  • get groupsExpanded(): boolean

  • Returns boolean

  • set groupsExpanded(value): void

  • Gets/Sets whether created groups are rendered expanded or collapsed.

    Remarks

    The default rendered state is expanded.

    Example

    <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

groupsRecords

  • get groupsRecords(): IgcGroupByRecord[]

  • Gets the hierarchical representation of the group by records.

    Example

    let groupRecords = this.grid.groupsRecords;

    Returns IgcGroupByRecord[]

headSelectorTemplate

  • get headSelectorTemplate(): IgcRenderFunction<IgcHeadSelectorTemplateContext>

  • Returns IgcRenderFunction<IgcHeadSelectorTemplateContext>

  • set headSelectorTemplate(value): void

  • Gets the header row selector template.

    Parameters

    Returns void

headerCollapsedIndicatorTemplate

  • get headerCollapsedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>

  • Returns IgcRenderFunction<IgcGridTemplateContext>

  • set headerCollapsedIndicatorTemplate(value): void

  • Gets the row collapse indicator template.

    Parameters

    Returns void

headerExpandedIndicatorTemplate

  • get headerExpandedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>

  • Returns IgcRenderFunction<IgcGridTemplateContext>

  • set headerExpandedIndicatorTemplate(value): void

  • Gets the header expand indicator template.

    Parameters

    Returns void

height

  • get height(): string

  • Returns string

  • set height(value): void

  • Gets/Sets the height.

    Example

    <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

hiddenColumnsCount

  • get hiddenColumnsCount(): number

  • Gets the number of hidden columns.

    Example

    const hiddenCol = this.grid.hiddenColumnsCount;

    Returns number

hideGroupedColumns

  • get hideGroupedColumns(): boolean

  • Returns boolean

  • set hideGroupedColumns(value): void

  • Gets/Sets whether the grouped columns should be hidden.

    Remarks

    The default value is "false"

    Example

    <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

hideRowSelectors

  • get hideRowSelectors(): boolean

  • Returns boolean

  • set hideRowSelectors(value): void

  • Gets/Sets if the row selectors are hidden.

    Remarks

    By default row selectors are shown

    Parameters

    • value: boolean

    Returns void

id

  • get id(): string

  • Returns the value of element's id content attribute. Can be set to change it.

    Returns string

  • set id(value): void

  • Gets/Sets the value of the id attribute.

    Remarks

    If not provided it will be automatically generated.

    Example

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

isLoading

  • get isLoading(): boolean

  • Returns boolean

  • set isLoading(value): void

  • Gets/Sets whether the grid is going to show a loading indicator.

    Example

    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

lastSearchInfo

  • get lastSearchInfo(): IgcSearchInfo

  • Represents the last search information.

    Returns IgcSearchInfo

loadingGridTemplate

  • get loadingGridTemplate(): IgcRenderFunction<void>

  • Returns IgcRenderFunction<void>

  • set loadingGridTemplate(value): void

  • Gets/Sets a custom template when loading.

    Example

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

    Parameters

    Returns void

locale

  • get locale(): string

  • Returns string

  • set locale(value): void

  • Gets/Sets the locale.

    Remarks

    If not set, returns browser's language.

    Parameters

    • value: string

    Returns void

moving

  • get moving(): boolean

  • Returns boolean

  • set moving(value): void

  • Controls whether columns moving is enabled in the grid.

    Parameters

    • value: boolean

    Returns void

outlet

  • get outlet(): IgcOverlayOutletDirective

  • Returns IgcOverlayOutletDirective

  • set outlet(value): void

  • Gets/Sets the outlet used to attach the grid's overlays to.

    Remarks

    If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.

    Parameters

    Returns void

paginationComponents

  • get paginationComponents(): IgcPaginatorComponent[]

  • Returns IgcPaginatorComponent[]

pagingMode

  • get pagingMode(): GridPagingMode

  • Returns GridPagingMode

  • set pagingMode(value): void

  • Parameters

    Returns void

pinnedColumns

  • get pinnedColumns(): IgcColumnComponent[]

  • Gets an array of the pinned IgxColumnComponents.

    Example

    const pinnedColumns = this.grid.pinnedColumns.

    Returns IgcColumnComponent[]

pinnedColumnsCount

  • get pinnedColumnsCount(): number

  • Gets the number of pinned columns.

    Returns number

pinnedRows

  • get pinnedRows(): IgcGridRowComponent[]

  • Gets an array of the pinned IgxRowComponents.

    Example

    const pinnedRow = this.grid.pinnedRows;

    Returns IgcGridRowComponent[]

pinning

  • get pinning(): IgcPinningConfig

  • Returns IgcPinningConfig

  • set pinning(value): void

  • Gets/Sets the initial pinning configuration.

    Remarks

    Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.

    Example

    <igx-grid [pinning]="pinningConfig"></igx-grid>

    Parameters

    Returns void

primaryKey

  • get primaryKey(): string

  • Returns string

  • set primaryKey(value): void

  • Gets/Sets the primary key.

    Example

    <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

resourceStrings

  • get resourceStrings(): IgcGridResourceStrings

  • Returns IgcGridResourceStrings

  • set resourceStrings(value): void

  • Gets/Sets the resource strings.

    Remarks

    By default it uses EN resources.

    Parameters

    Returns void

rowAddTextTemplate

  • get rowAddTextTemplate(): IgcRenderFunction<IgcGridEmptyTemplateContext>

  • Returns IgcRenderFunction<IgcGridEmptyTemplateContext>

  • set rowAddTextTemplate(value): void

  • Gets the row add text template.

    Parameters

    Returns void

rowClasses

  • get rowClasses(): any

  • Returns any

  • set rowClasses(value): void

  • Sets a conditional class selector to the grid's row element. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class and the value is either a callback function that returns a boolean, or boolean, like so:

    callback = (row: RowType) => { return row.selected > 6; }
    rowClasses = { 'className' : this.callback };

    <igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>

    Memberof

    IgxColumnComponent

    Parameters

    • value: any

    Returns void

rowCollapsedIndicatorTemplate

  • get rowCollapsedIndicatorTemplate(): IgcRenderFunction<IgcGridRowTemplateContext>

  • Returns IgcRenderFunction<IgcGridRowTemplateContext>

  • set rowCollapsedIndicatorTemplate(value): void

  • Gets the row collapse indicator template.

    Parameters

    Returns void

rowDraggable

  • get rowDraggable(): boolean

  • Returns boolean

  • set rowDraggable(value): void

  • Gets/Sets whether rows can be moved.

    Example

    <igx-grid #grid [rowDraggable]="true"></igx-grid>

    Parameters

    • value: boolean

    Returns void

rowEditActionsTemplate

rowEditTextTemplate

rowEditable

  • get rowEditable(): boolean

  • Returns boolean

  • set rowEditable(value): void

  • Gets/Sets whether the rows are editable.

    Remarks

    By default it is set to false.

    Example

    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>

    Parameters

    • value: boolean

    Returns void

rowExpandedIndicatorTemplate

  • get rowExpandedIndicatorTemplate(): IgcRenderFunction<IgcGridRowTemplateContext>

  • Returns IgcRenderFunction<IgcGridRowTemplateContext>

  • set rowExpandedIndicatorTemplate(value): void

  • Gets the row expand indicator template.

    Parameters

    Returns void

rowHeight

  • get rowHeight(): number

  • Returns number

  • set rowHeight(value): void

  • Gets/Sets the row height.

    Example

    <igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: number

    Returns void

rowList

  • get rowList(): IgcRowDirective[]

  • A list of IgxGridRowComponent.

    Example

    const rowList = this.grid.rowList;

    Returns IgcRowDirective[]

rowSelection

  • get rowSelection(): GridSelectionMode

  • Returns GridSelectionMode

  • set rowSelection(value): void

  • Gets/Sets row selection mode

    Remarks

    By default the row selection mode is 'none' Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'

    Parameters

    Returns void

rowSelectorTemplate

  • get rowSelectorTemplate(): IgcRenderFunction<IgcRowSelectorTemplateContext>

  • Returns IgcRenderFunction<IgcRowSelectorTemplateContext>

  • set rowSelectorTemplate(value): void

  • Gets the row selector template.

    Parameters

    Returns void

rowStyles

  • get rowStyles(): any

  • Returns any

  • set rowStyles(value): void

  • Sets conditional style properties on the grid row element. It accepts an object literal where the keys are the style properties and the value is an expression to be evaluated.

    styles = {
     background: 'yellow',
     color: (row: RowType) => row.selected : 'red': 'white'
    }

    <igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>

    Memberof

    IgxColumnComponent

    Parameters

    • value: any

    Returns void

selectRowOnClick

  • get selectRowOnClick(): boolean

  • Returns boolean

  • set selectRowOnClick(value): void

  • Gets/Sets whether clicking over a row should select/deselect it

    Remarks

    By default it is set to true

    Parameters

    • value: boolean

    Returns void

selectedCells

  • get selectedCells(): IgcCellType[]

  • Returns an array of the selected IgxGridCells.

    Example

    const selectedCells = this.grid.selectedCells;

    Returns IgcCellType[]

selectedRows

  • get selectedRows(): any[]

  • Returns any[]

  • set selectedRows(value): void

  • Gets/Sets the current selection state.

    Remarks

    Represents the selected rows' IDs (primary key or rowData)

    Example

    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>

    Parameters

    • value: any[]

    Returns void

shouldGenerate

  • get shouldGenerate(): boolean

  • Returns boolean

  • set shouldGenerate(value): void

  • Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid

    Remarks

    This will allow to bind the grid to remote data and having auto-generated columns at the same time. Note that after generating the columns, this property would be disabled to avoid re-creating columns each time a new data is assigned.

    Example

     this.grid.shouldGenerate = true;

    Deprecated

    Column re-creation now relies on autoGenerate instead.

    Parameters

    • value: boolean

    Returns void

showGroupArea

  • get showGroupArea(): boolean

  • Returns boolean

  • set showGroupArea(value): void

  • Returns whether the IgxGridComponent has group area.

    Example

    let isGroupAreaVisible = this.grid.showGroupArea;

    Example

    <igx-grid #grid [data]="Data" [showGroupArea]="false"></igx-grid>

    Parameters

    • value: boolean

    Returns void

showSummaryOnCollapse

  • get showSummaryOnCollapse(): boolean

  • Returns boolean

  • set showSummaryOnCollapse(value): void

  • Controls whether the summary row is visible when groupBy/parent row is collapsed.

    Example

    <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>

    Remarks

    By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible when the groupBy/parent row is collapsed.

    Parameters

    • value: boolean

    Returns void

snackbarDisplayTime

  • get snackbarDisplayTime(): number

  • Returns number

  • set snackbarDisplayTime(value): void

  • Gets/Sets the display time for the row adding snackbar notification.

    Remarks

    By default it is 6000ms.

    Parameters

    • value: number

    Returns void

sortAscendingHeaderIconTemplate

  • get sortAscendingHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>

  • Returns IgcRenderFunction<IgcGridHeaderTemplateContext>

  • set sortAscendingHeaderIconTemplate(value): void

  • The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

    Parameters

    Returns void

sortDescendingHeaderIconTemplate

  • get sortDescendingHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>

  • Returns IgcRenderFunction<IgcGridHeaderTemplateContext>

  • set sortDescendingHeaderIconTemplate(value): void

  • The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

    Parameters

    Returns void

sortHeaderIconTemplate

  • get sortHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>

  • Returns IgcRenderFunction<IgcGridHeaderTemplateContext>

  • set sortHeaderIconTemplate(value): void

  • Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

    Parameters

    Returns void

sortStrategy

  • get sortStrategy(): IgcGridSortingStrategy

  • Returns IgcGridSortingStrategy

  • set sortStrategy(value): void

  • Gets/Sets the sorting strategy of the grid.

    Example

     <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>

    Parameters

    Returns void

sortingExpressions

  • get sortingExpressions(): IgcSortingExpression[]

  • Returns IgcSortingExpression[]

  • set sortingExpressions(value): void

  • Gets/Sets the sorting state.

    Remarks

    Supports two-way data binding.

    Example

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>

    Parameters

    Returns void

sortingOptions

  • get sortingOptions(): IgcSortingOptions

  • Returns IgcSortingOptions

  • set sortingOptions(value): void

  • Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

    Example

    const _sortingOptions: ISortingOptions = {
         mode: 'single'
    }
    ```html
    <igx-grid [sortingOptions]="sortingOptions"><igx-grid>

    Parameters

    Returns void

summaryCalculationMode

  • get summaryCalculationMode(): GridSummaryCalculationMode

  • Returns GridSummaryCalculationMode

  • set summaryCalculationMode(value): void

  • Gets/Sets the summary calculation mode.

    Example

    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>

    Remarks

    By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.

    Parameters

    Returns void

summaryPosition

  • get summaryPosition(): GridSummaryPosition

  • Returns GridSummaryPosition

  • set summaryPosition(value): void

  • Gets/Sets the summary position.

    Example

    <igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>

    Remarks

    By default it is bottom.

    Parameters

    Returns void

summaryRowHeight

  • get summaryRowHeight(): number

  • Returns number

  • set summaryRowHeight(value): void

  • Get/Set IgxSummaryRow height

    Parameters

    • value: number

    Returns void

toolbar

  • get toolbar(): IgcGridToolbarComponent[]

  • Returns IgcGridToolbarComponent[]

totalItemCount

  • get totalItemCount(): number

  • Returns number

  • set totalItemCount(value): void

  • Gets/Sets the total number of records in the data source.

    Remarks

    This property is required for remote grid virtualization to function when it is bound to remote data.

    Example

    const itemCount = this.grid1.totalItemCount;
    this.grid1.totalItemCount = 55;

    Parameters

    • value: number

    Returns void

totalRecords

  • get totalRecords(): number

  • Returns number

  • set totalRecords(value): void

  • Returns the total number of records.

    Remarks

    Only functions when paging is enabled.

    Example

    const totalRecords = this.grid.totalRecords;

    Parameters

    • value: number

    Returns void

unpinnedColumns

  • get unpinnedColumns(): IgcColumnComponent[]

  • Gets an array of unpinned IgxColumnComponents.

    Example

    const unpinnedColumns = this.grid.unpinnedColumns.

    Returns IgcColumnComponent[]

validationTrigger

  • get validationTrigger(): GridValidationTrigger

  • Returns GridValidationTrigger

  • set validationTrigger(value): void

  • Gets/Sets the trigger for validators used when editing the grid.

    Example

    <igx-grid #grid validationTrigger='blur'></igx-grid>

    Parameters

    Returns void

virtualizationState

  • get virtualizationState(): IgcForOfState

  • Returns the state of the grid virtualization.

    Remarks

    Includes the start index and how many records are rendered.

    Example

    const gridVirtState = this.grid1.virtualizationState;

    Returns IgcForOfState

visibleColumns

  • get visibleColumns(): IgcColumnComponent[]

  • Returns an array of visible IgxColumnComponents.

    Example

    const visibleColumns = this.grid.visibleColumns.

    Returns IgcColumnComponent[]

width

  • get width(): string

  • Returns string

  • set width(value): void

  • Gets/Sets the width of the grid.

    Example

    let gridWidth = this.grid.width;

    Parameters

    • value: string

    Returns void

Methods

addEventListener

  • addEventListener<K, M>(type, listener, options?): void

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: M[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: M[K]

          Returns any

    • options: boolean | AddEventListenerOptions

    Returns void

  • addEventListener(type, listener, options?): void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | AddEventListenerOptions

    Returns void

  • addEventListener<K, M>(type, listener, options?): void

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: M[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: M[K]

          Returns any

    • options: boolean | AddEventListenerOptions

    Returns void

  • addEventListener<K>(type, listener, options?): void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: HTMLElementEventMap[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • options: boolean | AddEventListenerOptions

    Returns void

addRow

  • addRow(data): void

  • Creates a new IgxGridRowComponent and adds the data record to the end of the data source.

    Example

    this.grid1.addRow(record);

    Parameters

    • data: any

    Returns void

after

  • after(...nodes): void

  • Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

animate

  • animate(keyframes, options?): Animation

  • Parameters

    • keyframes: PropertyIndexedKeyframes | Keyframe[]
    • options: number | KeyframeAnimationOptions

    Returns Animation

append

  • append(...nodes): void

  • Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

appendChild

  • appendChild<T>(node): T

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: T

    Returns T

attachInternals

  • attachInternals(): ElementInternals

  • Returns ElementInternals

attachShadow

  • attachShadow(init): ShadowRoot

  • Creates a shadow root for element and returns it.

    Parameters

    • init: ShadowRootInit

    Returns ShadowRoot

before

  • before(...nodes): void

  • Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

beginAddRowById

  • beginAddRowById(rowID, asChild?): void

  • Enters add mode by spawning the UI under the specified row by rowID.

    Remarks

    If null is passed as rowID, the row adding UI is spawned as the first record in the data view

    Example

    this.grid.beginAddRowById('ALFKI');
    this.grid.beginAddRowById('ALFKI', true);
    this.grid.beginAddRowById(null);

    Parameters

    • rowID: any

      The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view

    • asChild: boolean

      Whether the record should be added as a child. Only applicable to igxTreeGrid.

    Returns void

beginAddRowByIndex

  • beginAddRowByIndex(index): void

  • Enters add mode by spawning the UI at the specified index.

    Remarks

    Accepted values for index are integers from 0 to this.grid.dataView.length

    Example

    this.grid.beginAddRowByIndex(0);

    Parameters

    • index: number

      The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length

    Returns void

blur

  • blur(): void

  • Returns void

clearCellSelection

  • clearCellSelection(): void

  • Deselect selected cells.

    Example

    this.grid.clearCellSelection();

    Returns void

clearFilter

  • clearFilter(name?): void

  • If name is provided, clears the filtering state of the corresponding IgxColumnComponent.

    Remarks

    Otherwise clears the filtering state of all IgxColumnComponents.

    Example

    this.grid.clearFilter();

    Parameters

    • name: string

    Returns void

clearGrouping

  • clearGrouping(name?): void

  • Clears grouping for particular column, array of columns or all columns.

    Remarks

    Clears all grouping in the grid, if no parameter is passed. If a parameter is provided, clears grouping for a particular column or an array of columns.

    Example

    this.grid.clearGrouping(); //clears all grouping
    this.grid.clearGrouping("ID"); //ungroups a single column
    this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns

    Parameters

    • name: string

      Name of column or array of column names to be ungrouped.

    Returns void

clearSearch

  • clearSearch(): void

  • Removes all the highlights in the cell.

    Example

    this.grid.clearSearch();

    Returns void

clearSort

  • clearSort(name?): void

  • If name is provided, clears the sorting state of the corresponding IgxColumnComponent.

    Remarks

    otherwise clears the sorting state of all IgxColumnComponent.

    Example

    this.grid.clearSort();

    Parameters

    • name: string

    Returns void

click

  • click(): void

  • Returns void

cloneNode

  • cloneNode(deep?): Node

  • Returns a copy of node. If deep is true, the copy also includes the node's descendants.

    Parameters

    • deep: boolean

    Returns Node

closeAdvancedFilteringDialog

  • closeAdvancedFilteringDialog(applyChanges): void

  • Closes the advanced filtering dialog.

    Parameters

    • applyChanges: boolean

      indicates whether the changes should be applied

    Returns void

closest

  • closest<K>(selector): HTMLElementTagNameMap[K]

  • Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise.

    Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selector: K

    Returns HTMLElementTagNameMap[K]

  • closest<K>(selector): SVGElementTagNameMap[K]

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selector: K

    Returns SVGElementTagNameMap[K]

  • closest<E>(selectors): E

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns E

collapseAll

  • collapseAll(): void

  • Collapses all rows.

    Example

    this.grid.collapseAll();

    Returns void

collapseRow

  • collapseRow(rowID): void

  • Collapses the row by its id.

    Remarks

    ID is either the primaryKey value or the data record instance.

    Example

    this.grid.collapseRow(rowID);

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

compareDocumentPosition

  • compareDocumentPosition(other): number

  • Returns a bitmask indicating the position of other relative to node.

    Parameters

    • other: Node

    Returns number

contains

  • contains(other): boolean

  • Returns true if other is an inclusive descendant of node, and false otherwise.

    Parameters

    • other: Node

    Returns boolean

deleteRow

  • deleteRow(rowSelector): any

  • Removes the IgxGridRowComponent and the corresponding data record by primary key.

    Remarks

    Requires that the primaryKey property is set. The method accept rowSelector as a parameter, which is the rowID.

    Example

    this.grid1.deleteRow(0);

    Parameters

    • rowSelector: any

    Returns any

deselectAllColumns

  • deselectAllColumns(): void

  • Deselects all columns

    Example

    this.grid.deselectAllColumns();

    Returns void

deselectAllRows

  • deselectAllRows(onlyFilterData?): void

  • Deselects all rows

    Remarks

    By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows.

    Example

    this.grid.deselectAllRows();

    Parameters

    • onlyFilterData: boolean

    Returns void

deselectColumns

  • deselectColumns(columns): void

  • Deselect specified columns by field.

    Example

    this.grid.deselectColumns(['ID','Name']);

    Parameters

    Returns void

deselectRows

  • deselectRows(rowIDs): void

  • Deselect specified rows by ID.

    Example

    this.grid.deselectRows([1,2,5]);

    Parameters

    • rowIDs: any[]

    Returns void

deselectRowsInGroup

  • deselectRowsInGroup(groupRow): void

  • Deselect all rows within a group.

    Example

    public groupRow: IGroupByRecord;
    this.grid.deselectRowsInGroup(this.groupRow);

    Parameters

    Returns void

disableSummaries

  • disableSummaries(rest): void

  • Disable summaries for the specified column.

    Example

    grid.disableSummaries('ProductName');

    Remarks

    Disable summaries for the listed columns.

    Example

    grid.disableSummaries([{ fieldName: 'ProductName' }]);

    Parameters

    • rest: any[]

    Returns void

dispatchEvent

  • dispatchEvent(event): boolean

  • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

    Parameters

    • event: Event

    Returns boolean

enableSummaries

  • enableSummaries(rest): void

  • Enables summaries for the specified column and applies your customSummary.

    Remarks

    If you do not provide the customSummary, then the default summary for the column data type will be applied.

    Example

    grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);

    Enable summaries for the listed columns.

    Example

    grid.enableSummaries('ProductName');

    Parameters

    • rest: any[]

    Returns void

endEdit

  • endEdit(commit?, evt?): boolean

  • Finishes the row transactions on the current row and returns whether the grid editing was canceled.

    Remarks

    If commit === true, passes them from the pending state to the data (or transaction service)

    Example

    <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>

    Parameters

    • commit: boolean
    • evt: any

    Returns boolean

expandAll

  • expandAll(): void

  • Expands all rows.

    Example

    this.grid.expandAll();

    Returns void

expandRow

  • expandRow(rowID): void

  • Expands the row by its id.

    Remarks

    ID is either the primaryKey value or the data record instance.

    Example

    this.grid.expandRow(rowID);

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

filter

  • filter(name, value, conditionOrExpressionTree?, ignoreCase?): void

  • Filters a single IgxColumnComponent.

    Example

    public filter(term) {
         this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
    }

    Parameters

    Returns void

filterGlobal

  • filterGlobal(value, condition, ignoreCase?): void

  • Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.

    Example

    grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));

    Deprecated

    Parameters

    • value: any
    • condition: any
    • ignoreCase: any

    Returns void

findNext

  • findNext(text, caseSensitive?, exactMatch?): number

  • Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    Remarks

    Returns how many times the grid contains the string.

    Example

    this.grid.findNext("financial");

    Parameters

    • text: string

      the string to search.

    • caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    Returns number

findPrev

  • findPrev(text, caseSensitive?, exactMatch?): number

  • Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    Remarks

    Returns how many times the grid contains the string.

    Example

    this.grid.findPrev("financial");

    Parameters

    • text: string

      the string to search.

    • caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    Returns number

focus

  • focus(options?): void

  • Parameters

    • options: FocusOptions

    Returns void

fullyExpandGroup

  • fullyExpandGroup(groupRow): void

  • Expands the specified group and all of its parent groups.

    Example

    public groupRow: IGroupByRecord;
    this.grid.fullyExpandGroup(this.groupRow);

    Parameters

    Returns void

getAnimations

  • getAnimations(options?): Animation[]

  • Parameters

    • options: GetAnimationsOptions

    Returns Animation[]

getAttribute

  • getAttribute(qualifiedName): string

  • Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise.

    Parameters

    • qualifiedName: string

    Returns string

getAttributeNS

  • getAttributeNS(namespace, localName): string

  • Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise.

    Parameters

    • namespace: string
    • localName: string

    Returns string

getAttributeNames

  • getAttributeNames(): string[]

  • Returns the qualified names of all element's attributes. Can contain duplicates.

    Returns string[]

getAttributeNode

  • getAttributeNode(qualifiedName): Attr

  • Parameters

    • qualifiedName: string

    Returns Attr

getAttributeNodeNS

  • getAttributeNodeNS(namespace, localName): Attr

  • Parameters

    • namespace: string
    • localName: string

    Returns Attr

getBoundingClientRect

  • getBoundingClientRect(): DOMRect

  • Returns DOMRect

getCellByColumn

  • getCellByColumn(rowIndex, columnField): IgcCellType

  • Returns a CellType object that matches the conditions.

    Example

    const myCell = this.grid1.getCellByColumn(2, "UnitPrice");

    Parameters

    • rowIndex: number
    • columnField: string

    Returns IgcCellType

getCellByKey

  • getCellByKey(rowSelector, columnField): IgcCellType

  • Returns a CellType object that matches the conditions.

    Remarks

    Requires that the primaryKey property is set.

    Example

    grid.getCellByKey(1, 'index');

    Parameters

    • rowSelector: any

      match any rowID

    • columnField: string

    Returns IgcCellType

getClientRects

  • getClientRects(): DOMRectList

  • Returns DOMRectList

getColumnByName

  • getColumnByName(name): IgcColumnComponent

  • Returns the IgxColumnComponent by field name.

    Example

    const myCol = this.grid1.getColumnByName("ID");

    Parameters

    • name: string

    Returns IgcColumnComponent

getColumnByVisibleIndex

  • getColumnByVisibleIndex(index): IgcColumnComponent

  • Parameters

    • index: number

    Returns IgcColumnComponent

getElementsByClassName

  • getElementsByClassName(classNames): HTMLCollectionOf<Element>

  • Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.

    Parameters

    • classNames: string

    Returns HTMLCollectionOf<Element>

getElementsByTagName

  • getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<HTMLElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<HTMLElementTagNameMap[K]>

  • getElementsByTagName<K>(qualifiedName): HTMLCollectionOf<SVGElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<SVGElementTagNameMap[K]>

  • getElementsByTagName(qualifiedName): HTMLCollectionOf<Element>

  • Parameters

    • qualifiedName: string

    Returns HTMLCollectionOf<Element>

getElementsByTagNameNS

  • getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf<HTMLElement>

  • Parameters

    • namespaceURI: "http://www.w3.org/1999/xhtml"
    • localName: string

    Returns HTMLCollectionOf<HTMLElement>

  • getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf<SVGElement>

  • Parameters

    • namespaceURI: "http://www.w3.org/2000/svg"
    • localName: string

    Returns HTMLCollectionOf<SVGElement>

  • getElementsByTagNameNS(namespace, localName): HTMLCollectionOf<Element>

  • Parameters

    • namespace: string
    • localName: string

    Returns HTMLCollectionOf<Element>

getHeaderGroupWidth

  • getHeaderGroupWidth(column): string

  • Gets the width to be set on IgxGridHeaderGroupComponent.

    Parameters

    Returns string

getNextCell

  • getNextCell(currRowIndex, curVisibleColIndex, callback?): IgcCellPosition

  • Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.

    Remarks

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

    Example

     const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: any

    Returns IgcCellPosition

getPinnedWidth

  • getPinnedWidth(takeHidden?): void

  • Gets calculated width of the pinned area.

    Example

    const pinnedWidth = this.grid.getPinnedWidth();

    Parameters

    • takeHidden: boolean

      If we should take into account the hidden columns in the pinned area.

    Returns void

getPreviousCell

  • getPreviousCell(currRowIndex, curVisibleColIndex, callback?): IgcCellPosition

  • Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.

    Remarks

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

    Example

     const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: any

    Returns IgcCellPosition

getRootNode

  • getRootNode(options?): Node

  • Returns node's root.

    Parameters

    • options: GetRootNodeOptions

    Returns Node

getRowByIndex

  • getRowByIndex(index): IgcRowType

  • Returns the IgxGridRow by index.

    Example

    const myRow = grid.getRowByIndex(1);

    Parameters

    • index: number

    Returns IgcRowType

getRowByKey

  • getRowByKey(key): IgcRowType

  • Returns IgxGridRow object by the specified primary key.

    Remarks

    Requires that the primaryKey property is set.

    Example

    const myRow = this.grid1.getRowByKey("cell5");

    Parameters

    • key: any

    Returns IgcRowType

getRowData

  • getRowData(rowSelector): any

  • Returns the data that is contained in the row component.

    Remarks

    If the primary key is not specified the row selector match the row data.

    Example

    const data = grid.getRowData(94741);

    Parameters

    • rowSelector: any

      correspond to rowID

    Returns any

getSelectedColumnsData

  • getSelectedColumnsData(formatters?, headers?): void

  • Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

    Remarks

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean
    • headers: boolean

    Returns void

getSelectedData

  • getSelectedData(formatters?, headers?): any[]

  • Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

    Remarks

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean
    • headers: boolean

    Returns any[]

getSelectedRanges

  • getSelectedRanges(): IgcGridSelectionRange[]

  • Get the currently selected ranges in the grid.

    Returns IgcGridSelectionRange[]

groupBy

  • groupBy(expression): void

  • Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one.

    Remarks

    Also allows for multiple columns to be grouped at once if an array of ISortingExpression is passed. The groupingDone event would get raised only once if this method gets called multiple times with the same arguments.

    Example

    this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
    this.grid.groupBy([
        { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
        { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
        { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
    ]);

    Parameters

    Returns void

hasAttribute

  • hasAttribute(qualifiedName): boolean

  • Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise.

    Parameters

    • qualifiedName: string

    Returns boolean

hasAttributeNS

  • hasAttributeNS(namespace, localName): boolean

  • Returns true if element has an attribute whose namespace is namespace and local name is localName.

    Parameters

    • namespace: string
    • localName: string

    Returns boolean

hasAttributes

  • hasAttributes(): boolean

  • Returns true if element has attributes, and false otherwise.

    Returns boolean

hasChildNodes

  • hasChildNodes(): boolean

  • Returns whether node has children.

    Returns boolean

hasPointerCapture

  • hasPointerCapture(pointerId): boolean

  • Parameters

    • pointerId: number

    Returns boolean

insertAdjacentElement

  • insertAdjacentElement(where, element): Element

  • Parameters

    • where: InsertPosition
    • element: Element

    Returns Element

insertAdjacentHTML

  • insertAdjacentHTML(position, text): void

  • Parameters

    • position: InsertPosition
    • text: string

    Returns void

insertAdjacentText

  • insertAdjacentText(where, data): void

  • Parameters

    • where: InsertPosition
    • data: string

    Returns void

insertBefore

  • insertBefore<T>(node, child): T

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: T
    • child: Node

    Returns T

isDefaultNamespace

  • isDefaultNamespace(namespace): boolean

  • Parameters

    • namespace: string

    Returns boolean

isEqualNode

  • isEqualNode(otherNode): boolean

  • Returns whether node and otherNode have the same properties.

    Parameters

    • otherNode: Node

    Returns boolean

isExpandedGroup

  • isExpandedGroup(group): boolean

  • Returns if a group is expanded or not.

    Example

    public groupRow: IGroupByRecord;
    const expandedGroup = this.grid.isExpandedGroup(this.groupRow);

    Parameters

    Returns boolean

isRecordPinnedByIndex

  • isRecordPinnedByIndex(rowIndex): void

  • Returns whether the record is pinned or not.

    Parameters

    • rowIndex: number

      Index of the record in the filteredSortedData collection.

    Returns void

isSameNode

  • isSameNode(otherNode): boolean

  • Parameters

    • otherNode: Node

    Returns boolean

lookupNamespaceURI

  • lookupNamespaceURI(prefix): string

  • Parameters

    • prefix: string

    Returns string

lookupPrefix

  • lookupPrefix(namespace): string

  • Parameters

    • namespace: string

    Returns string

markForCheck

  • markForCheck(): void

  • Triggers change detection for the IgxGridComponent. Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. May degrade performance if used when not needed, or if misused:

    // DON'Ts:
    // don't call markForCheck from inside a loop
    // don't call markForCheck when a primitive has changed
    grid.data.forEach(rec => {
     rec = newValue;
     grid.markForCheck();
    });

    // DOs
    // call markForCheck after updating a nested property
    grid.data.forEach(rec => {
     rec.nestedProp1.nestedProp2 = newValue;
    });
    grid.markForCheck();

    Example

    grid.markForCheck();

    Returns void

matches

  • matches(selectors): boolean

  • Returns true if matching selectors against element's root yields element, and false otherwise.

    Parameters

    • selectors: string

    Returns boolean

moveColumn

  • moveColumn(column, target, pos?): void

  • Places a column before or after the specified target column.

    Example

    grid.moveColumn(column, target);

    Parameters

    Returns void

navigateTo

  • navigateTo(rowIndex, visibleColIndex?, cb?): void

  • Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

    Remarks

    Also can execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }

    Example

     this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });

    Parameters

    • rowIndex: number
    • visibleColIndex: number
    • cb: any

    Returns void

normalize

  • normalize(): void

  • Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

    Returns void

openAdvancedFilteringDialog

  • openAdvancedFilteringDialog(overlaySettings?): void

  • Opens the advanced filtering dialog.

    Parameters

    Returns void

pinColumn

  • pinColumn(columnName, index?): boolean

  • Pins a column by field name.

    Remarks

    Returns whether the operation is successful.

    Example

    this.grid.pinColumn("ID");

    Parameters

    • columnName: string
    • index: number

    Returns boolean

pinRow

  • pinRow(rowID, index?): boolean

  • Pin the row by its id.

    Remarks

    ID is either the primaryKey value or the data record instance.

    Example

    this.grid.pinRow(rowID);

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    • index: number

      The index at which to insert the row in the pinned collection.

    Returns boolean

prepend

  • prepend(...nodes): void

  • Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

querySelector

  • querySelector<K>(selectors): HTMLElementTagNameMap[K]

  • Returns the first element that is a descendant of node that matches selectors.

    Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selectors: K

    Returns HTMLElementTagNameMap[K]

  • querySelector<K>(selectors): SVGElementTagNameMap[K]

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns SVGElementTagNameMap[K]

  • querySelector<E>(selectors): E

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns E

querySelectorAll

  • querySelectorAll<K>(selectors): NodeListOf<HTMLElementTagNameMap[K]>

  • Returns all element descendants of node that match selectors.

    Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<HTMLElementTagNameMap[K]>

  • querySelectorAll<K>(selectors): NodeListOf<SVGElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<SVGElementTagNameMap[K]>

  • querySelectorAll<E>(selectors): NodeListOf<E>

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns NodeListOf<E>

recalculateAutoSizes

  • recalculateAutoSizes(): void

  • Recalculates all widths of columns that have size set to auto.

    Example

    this.grid1.recalculateAutoSizes();

    Returns void

reflow

  • reflow(): void

  • Recalculates grid width/height dimensions.

    Remarks

    Should be run when changing DOM elements dimentions manually that affect the grid's size.

    Example

    this.grid.reflow();

    Returns void

refreshSearch

  • refreshSearch(updateActiveInfo?, endEdit?): number

  • Reapplies the existing search.

    Remarks

    Returns how many times the grid contains the last search.

    Example

    this.grid.refreshSearch();

    Parameters

    • updateActiveInfo: boolean
    • endEdit: boolean

    Returns number

releasePointerCapture

  • releasePointerCapture(pointerId): void

  • Parameters

    • pointerId: number

    Returns void

remove

  • remove(): void

  • Removes node.

    Returns void

removeAttribute

  • removeAttribute(qualifiedName): void

  • Removes element's first attribute whose qualified name is qualifiedName.

    Parameters

    • qualifiedName: string

    Returns void

removeAttributeNS

  • removeAttributeNS(namespace, localName): void

  • Removes element's attribute whose namespace is namespace and local name is localName.

    Parameters

    • namespace: string
    • localName: string

    Returns void

removeAttributeNode

  • removeAttributeNode(attr): Attr

  • Parameters

    • attr: Attr

    Returns Attr

removeChild

  • removeChild<T>(child): T

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • child: T

    Returns T

removeEventListener

  • removeEventListener<K, M>(type, listener, options?): void

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: M[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: M[K]

          Returns any

    • options: boolean | EventListenerOptions

    Returns void

  • removeEventListener(type, listener, options?): void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | EventListenerOptions

    Returns void

  • removeEventListener<K, M>(type, listener, options?): void

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: M[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: M[K]

          Returns any

    • options: boolean | EventListenerOptions

    Returns void

  • removeEventListener<K>(type, listener, options?): void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this: HTMLElement, ev: HTMLElementEventMap[K]) => any)
        • (this, ev): any

        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • options: boolean | EventListenerOptions

    Returns void

replaceChild

  • replaceChild<T>(node, child): T

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: Node
    • child: T

    Returns T

replaceChildren

  • replaceChildren(...nodes): void

  • Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

replaceWith

  • replaceWith(...nodes): void

  • Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • ...nodes: (string | Node)[]

    Returns void

requestFullscreen

  • requestFullscreen(options?): Promise<void>

  • Displays element fullscreen and resolves promise when done.

    When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference.

    Parameters

    • options: FullscreenOptions

    Returns Promise<void>

requestPointerLock

  • requestPointerLock(): void

  • Returns void

scroll

  • scroll(options?): void

  • Parameters

    • options: ScrollToOptions

    Returns void

  • scroll(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

scrollBy

  • scrollBy(options?): void

  • Parameters

    • options: ScrollToOptions

    Returns void

  • scrollBy(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

scrollIntoView

  • scrollIntoView(arg?): void

  • Parameters

    • arg: boolean | ScrollIntoViewOptions

    Returns void

scrollTo

  • scrollTo(options?): void

  • Parameters

    • options: ScrollToOptions

    Returns void

  • scrollTo(x, y): void

  • Parameters

    • x: number
    • y: number

    Returns void

selectAllColumns

  • selectAllColumns(): void

  • Selects all columns

    Example

    this.grid.deselectAllColumns();

    Returns void

selectAllRows

  • selectAllRows(onlyFilterData?): void

  • Selects all rows

    Remarks

    By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows.

    Example

    this.grid.selectAllRows();
    this.grid.selectAllRows(false);

    Parameters

    • onlyFilterData: boolean

    Returns void

selectColumns

  • selectColumns(columns, clearCurrentSelection?): void

  • Select specified columns.

    Example

    this.grid.selectColumns(['ID','Name'], true);

    Parameters

    • columns: string[] | IgcColumnComponent[]
    • clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

selectRange

  • selectRange(arg): void

  • Select range(s) of cells between certain rows and columns of the grid.

    Parameters

    Returns void

selectRows

  • selectRows(rowIDs, clearCurrentSelection?): void

  • Select specified rows by ID.

    Example

    this.grid.selectRows([1,2,5], true);

    Parameters

    • rowIDs: any[]
    • clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

selectRowsInGroup

  • selectRowsInGroup(groupRow, clearPrevSelection?): void

  • Select all rows within a group.

    Example

    this.grid.selectRowsInGroup(this.groupRow, true);

    Parameters

    Returns void

selectedColumns

  • selectedColumns(): IgcColumnComponent[]

  • Get current selected columns.

    Example

    Returns an array with selected columns

    const selectedColumns = this.grid.selectedColumns();

    Returns IgcColumnComponent[]

setAttribute

  • setAttribute(qualifiedName, value): void

  • Sets the value of element's first attribute whose qualified name is qualifiedName to value.

    Parameters

    • qualifiedName: string
    • value: string

    Returns void

setAttributeNS

  • setAttributeNS(namespace, qualifiedName, value): void

  • Sets the value of element's attribute whose namespace is namespace and local name is localName to value.

    Parameters

    • namespace: string
    • qualifiedName: string
    • value: string

    Returns void

setAttributeNode

  • setAttributeNode(attr): Attr

  • Parameters

    • attr: Attr

    Returns Attr

setAttributeNodeNS

  • setAttributeNodeNS(attr): Attr

  • Parameters

    • attr: Attr

    Returns Attr

setPointerCapture

  • setPointerCapture(pointerId): void

  • Parameters

    • pointerId: number

    Returns void

sort

  • sort(expression): void

  • Sort a single IgxColumnComponent.

    Remarks

    Sort the IgxGridComponent's IgxColumnComponent based on the provided array of sorting expressions.

    Example

    this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });

    Parameters

    Returns void

toggleAllGroupRows

  • toggleAllGroupRows(): void

  • Toggles the expansion state of all group rows recursively.

    Example

    this.grid.toggleAllGroupRows;

    Returns void

toggleAttribute

  • toggleAttribute(qualifiedName, force?): boolean

  • If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName.

    Returns true if qualifiedName is now present, and false otherwise.

    Parameters

    • qualifiedName: string
    • force: boolean

    Returns boolean

toggleColumnVisibility

  • toggleColumnVisibility(args): void

  • Toggles the specified column's visibility.

    Example

    this.grid1.toggleColumnVisibility({
          column: this.grid1.columns[0],
          newValue: true
    });

    Parameters

    Returns void

toggleGroup

  • toggleGroup(groupRow): void

  • Toggles the expansion state of a group.

    Example

    public groupRow: IGroupByRecord;
    const toggleExpGroup = this.grid.toggleGroup(this.groupRow);

    Parameters

    Returns void

toggleRow

  • toggleRow(rowID): void

  • Toggles the row by its id.

    Remarks

    ID is either the primaryKey value or the data record instance.

    Example

    this.grid.toggleRow(rowID);

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

unpinColumn

  • unpinColumn(columnName, index?): boolean

  • Unpins a column by field name. Returns whether the operation is successful.

    Example

    this.grid.pinColumn("ID");

    Parameters

    • columnName: string
    • index: number

    Returns boolean

unpinRow

  • unpinRow(rowID): boolean

  • Unpin the row by its id.

    Remarks

    ID is either the primaryKey value or the data record instance.

    Example

    this.grid.unpinRow(rowID);

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns boolean

updateCell

  • updateCell(value, rowSelector, column): void

  • Updates the IgxGridRowComponent and the corresponding data record by primary key.

    Remarks

    Requires that the primaryKey property is set.

    Example

    this.gridWithPK.updateCell('Updated', 1, 'ProductName');

    Parameters

    • value: any

      the new value which is to be set.

    • rowSelector: any

      corresponds to rowID.

    • column: string

      corresponds to column field.

    Returns void

updateRow

  • updateRow(value, rowSelector): void

  • Updates the IgxGridRowComponent

    Remarks

    The row is specified by rowSelector parameter and the data source record with the passed value. This method will apply requested update only if primary key is specified in the grid.

    Example

    grid.updateRow({
          ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
      }, 1);

    Parameters

    • value: any
    • rowSelector: any

      correspond to rowID

    Returns void

webkitMatchesSelector

  • webkitMatchesSelector(selectors): boolean

  • Deprecated

    This is a legacy alias of matches.

    Parameters

    • selectors: string

    Returns boolean

Staticregister

  • register(): void

  • Returns void