Ignite UI for Angular Tree Grid - Documentation

The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding.

Example:

<igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" [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-tree-grid>

Hierarchy

Hierarchy (view full)

Constructors

Properties

Accessors

Methods

Constructors

Properties

ATTRIBUTE_NODE: number
CDATA_SECTION_NODE: number

node is a CDATASection node.

COMMENT_NODE: number

node is a Comment node.

DOCUMENT_FRAGMENT_NODE: number

node is a DocumentFragment node.

DOCUMENT_NODE: number

node is a document.

DOCUMENT_POSITION_CONTAINED_BY: number

Set when other is a descendant of node.

DOCUMENT_POSITION_CONTAINS: number

Set when other is an ancestor of node.

DOCUMENT_POSITION_DISCONNECTED: number

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

DOCUMENT_POSITION_FOLLOWING: number

Set when other is following node.

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number
DOCUMENT_POSITION_PRECEDING: number

Set when other is preceding node.

DOCUMENT_TYPE_NODE: number

node is a doctype.

ELEMENT_NODE: number

node is an element.

ENTITY_NODE: number
ENTITY_REFERENCE_NODE: number
NOTATION_NODE: number
PROCESSING_INSTRUCTION_NODE: number

node is a ProcessingInstruction node.

TEXT_NODE: number

node is a Text node.

accessKey: string
accessKeyLabel: string
ariaAtomic: string
ariaAutoComplete: string
ariaBusy: string
ariaChecked: string
ariaColCount: string
ariaColIndex: string
ariaColIndexText: string
ariaColSpan: string
ariaCurrent: string
ariaDisabled: string
ariaExpanded: string
ariaHasPopup: string
ariaHidden: string
ariaInvalid: string
ariaKeyShortcuts: string
ariaLabel: string
ariaLevel: string
ariaLive: string
ariaModal: string
ariaMultiLine: string
ariaMultiSelectable: string
ariaOrientation: string
ariaPlaceholder: string
ariaPosInSet: string
ariaPressed: string
ariaReadOnly: string
ariaRequired: string
ariaRoleDescription: string
ariaRowCount: string
ariaRowIndex: string
ariaRowIndexText: string
ariaRowSpan: string
ariaSelected: string
ariaSetSize: string
ariaSort: string
ariaValueMax: string
ariaValueMin: string
ariaValueNow: string
ariaValueText: string
assignedSlot: HTMLSlotElement
attributes: NamedNodeMap
autocapitalize: string
autofocus: boolean
baseURI: string

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

childElementCount: number
childNodes: NodeListOf<ChildNode>

Returns the children.

children: HTMLCollection

Returns the child elements.

classList: DOMTokenList

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

className: string

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

clientHeight: number
clientLeft: number
clientTop: number
clientWidth: number
contentEditable: string
dataset: DOMStringMap
dir: string
draggable: boolean
enterKeyHint: string
firstChild: ChildNode

Returns the first child.

firstElementChild: Element

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

hidden: boolean
inert: boolean
innerHTML: string
innerText: string
inputMode: string
isConnected: boolean

Returns true if node is connected and false otherwise.

isContentEditable: boolean
lang: string
lastChild: ChildNode

Returns the last child.

lastElementChild: Element

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

localName: string

Returns the local name.

namespaceURI: string

Returns the namespace.

nextElementSibling: Element

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

nextSibling: ChildNode

Returns the next sibling.

nodeName: string

Returns a string appropriate for the type of node.

nodeType: number

Returns the type of node.

nodeValue: string
nonce?: string
offsetHeight: number
offsetLeft: number
offsetParent: Element
offsetTop: number
offsetWidth: number
onabort: ((this, ev) => any)

Fires when the user aborts the download.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: UIEvent

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: AnimationEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: InputEvent

      Returns any

onblur: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oncanplay: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

onchange: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

oncontextmenu: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

ondblclick: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: DragEvent

      Returns any

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

Occurs when the duration attribute is updated.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onemptied: ((this, ev) => 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: ((this, ev) => any)

Occurs when the end of playback is reached.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event

      Returns any

onerror: OnErrorEventHandlerNonNull

Fires when an error occurs during object loading.

Param: ev

The event.

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

Fires when the object receives focus.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: FocusEvent

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: FormDataEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: Element
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: Element
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Fires when the user presses a key.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: KeyboardEvent

        The keyboard event

      Returns any

onkeypress: ((this, ev) => 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: ((this, ev) => any)

Fires when the user releases a key.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: KeyboardEvent

        The keyboard event

      Returns any

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

Fires immediately after the browser loads the object.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onloadeddata: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onmousedown: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: MouseEvent

      Returns any

onmousemove: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: DocumentAndElementEventHandlers
      • ev: ClipboardEvent

      Returns any

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

Occurs when playback is paused.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Occurs when the play method is requested.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

onplaying: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: PointerEvent

      Returns any

onprogress: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Fires when the user resets a form.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: UIEvent

      Returns any

onscroll: ((this, ev) => 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: ((this, ev) => any)

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: SecurityPolicyViolationEvent

      Returns any

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

Occurs when the seek operation ends.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Occurs when the current playback position is moved.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Fires when the current selection changes.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Occurs when the download has stopped.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: SubmitEvent

      Returns any

onsuspend: ((this, ev) => 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: ((this, ev) => any)

Occurs to indicate the current playback position.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

        The event.

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TouchEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: TransitionEvent

      Returns any

onvolumechange: ((this, ev) => 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: ((this, ev) => 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: ((this, ev) => any)

Deprecated

This is a legacy alias of onanimationend.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Deprecated

This is a legacy alias of onanimationiteration.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Deprecated

This is a legacy alias of onanimationstart.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Deprecated

This is a legacy alias of ontransitionend.

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: Event

      Returns any

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

Type declaration

    • (this, ev): any
    • Parameters

      • this: GlobalEventHandlers
      • ev: WheelEvent

      Returns any

outerHTML: string
outerText: string
ownerDocument: Document
parentElement: HTMLElement

Returns the parent element.

parentNode: ParentNode

Returns the parent.

part: DOMTokenList
prefix: string

Returns the namespace prefix.

previousElementSibling: Element

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

previousSibling: ChildNode

Returns the previous sibling.

role: string
scrollHeight: number
scrollLeft: number
scrollTop: number
scrollWidth: number
shadowRoot: ShadowRoot

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

slot: string

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

spellcheck: boolean
style: CSSStyleDeclaration
tabIndex: number
tagName: string

Returns the HTML-uppercased qualified name.

textContent: string
title: string
translate: boolean

Accessors

  • get actionStripComponents(): IgcActionStripComponent[]
  • Returns IgcActionStripComponent[]

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • get cascadeOnDelete(): boolean
  • Returns boolean

  • set cascadeOnDelete(value): void
  • An

    Input

    property indicating whether child records should be deleted when their parent gets deleted. By default it is set to true and deletes all children along with the parent.

    <igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
    </igx-tree-grid>

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: boolean

    Returns void

  • 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

  • get childDataKey(): any
  • Returns any

  • set childDataKey(value): void
  • An

    Input

    property that sets the child data key of the IgxTreeGridComponent.

    <igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
    

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: any

    Returns void

  • get clipboardOptions(): IgcClipboardOptions
  • Returns IgcClipboardOptions

  • set clipboardOptions(value): void
  • Controls the copy behavior of the grid.

    Parameters

    Returns void

  • get columnList(): IgcColumnComponent[]
  • Returns IgcColumnComponent[]

  • 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

  • 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

  • get columns(): IgcColumnComponent[]
  • Returns IgcColumnComponent[]

  • set columns(value): void
  • Gets an array of IgxColumnComponents.

    Example

    const columns = this.grid.columns.
    

    Parameters

    Returns void

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

  • set data(value): void
  • An

    Input

    property that lets you fill the IgxTreeGridComponent with an array of data.

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

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: any[]

    Returns void

  • 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

  • get dataRowList(): IgcRowDirective[]
  • A list of currently rendered IgxGridRowComponent's.

    Example

    const dataList = this.grid.dataRowList;
    

    Returns IgcRowDirective[]

  • 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[]

  • 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

  • get defaultRowHeight(): number
  • Gets the default row height.

    Example

    const rowHeigh = this.grid.defaultRowHeight;
    

    Returns number

  • get displayDensity(): DisplayDensity
  • Returns DisplayDensity

  • set displayDensity(value): void
  • Returns the theme of the component. The default theme is comfortable. Available options are comfortable, cosy, compact.

    let componentTheme = this.component.displayDensity;
    

    Parameters

    Returns void

  • 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

  • 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

  • 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

  • get expansionDepth(): number
  • Returns number

  • set expansionDepth(value): void
  • An

    Input

    property that sets the count of levels to be expanded in the IgxTreeGridComponent. By default it is set to Infinity which means all levels would be expanded.

    <igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
    

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: number

    Returns void

  • 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

  • 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

  • get filteredData(): any
  • Returns an array of objects containing the filtered data.

    Example

    let filteredData = this.grid.filteredData;
    

    Returns any

  • get filteredSortedData(): any[]
  • Returns an array containing the filtered sorted data.

    Example

    const filteredSortedData = this.grid1.filteredSortedData;
    

    Returns any[]

  • 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

  • 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

  • get foreignKey(): any
  • Returns any

  • set foreignKey(value): void
  • An

    Input

    property that sets the foreign key of the IgxTreeGridComponent.

    <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
    </igx-tree-grid>

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: any

    Returns void

  • get hasChildrenKey(): any
  • Returns any

  • set hasChildrenKey(value): void
  • An

    Input

    property that sets the key indicating whether a row has children. This property is only used for load on demand scenarios.

    <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
    [loadChildrenOnDemand]="loadChildren"
    [hasChildrenKey]="'hasEmployees'">
    </igx-tree-grid>

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: any

    Returns void

  • get headerCollapsedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>
  • Returns IgcRenderFunction<IgcGridTemplateContext>

  • set headerCollapsedIndicatorTemplate(value): void
  • Gets the row collapse indicator template.

    Parameters

    Returns void

  • get headerExpandedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>
  • Returns IgcRenderFunction<IgcGridTemplateContext>

  • set headerExpandedIndicatorTemplate(value): void
  • Gets the header expand indicator template.

    Parameters

    Returns void

  • 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

  • get hiddenColumnsCount(): number
  • Gets the number of hidden columns.

    Example

    const hiddenCol = this.grid.hiddenColumnsCount;
    ``

    Returns number

  • 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

  • get id(): string
  • Returns the value of element's id content attribute. Can be set to change it.

    Returns string

  • set id(value): void
  • An

    Input

    property that sets the value of the id attribute. If not provided it will be automatically generated.

    <igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
    

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: string

    Returns void

  • 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

  • get loadChildrenOnDemand(): any
  • Returns any

  • set loadChildrenOnDemand(value): void
  • An

    Input

    property that provides a callback for loading child rows on demand.

    <igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren">
    </igx-tree-grid>
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, children => done(children));
    }

    Memberof

    IgxTreeGridComponent

    Parameters

    • value: any

    Returns void

  • 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

  • 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

  • get moving(): boolean
  • Returns boolean

  • set moving(value): void
  • Controls whether columns moving is enabled in the grid.

    Parameters

    • value: boolean

    Returns void

  • get outlet(): IgcOverlayOutletDirective
  • Returns IgcOverlayOutletDirective

  • set outlet(value): void
  • Gets/Sets the outlet used to attach the grid's overlays to.

    Remark

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

    Parameters

    Returns void

  • get paginationComponents(): IgcPaginatorComponent[]
  • Returns IgcPaginatorComponent[]

  • get pagingMode(): GridPagingMode
  • Returns GridPagingMode

  • set pagingMode(value): void
  • Parameters

    Returns void

  • get pinnedColumns(): IgcColumnComponent[]
  • Gets an array of the pinned IgxColumnComponents.

    Example

    const pinnedColumns = this.grid.pinnedColumns.
    

    Returns IgcColumnComponent[]

  • get pinnedColumnsCount(): number
  • Gets the number of pinned columns.

    Returns number

  • get pinnedRows(): IgcGridRowComponent[]
  • Gets an array of the pinned IgxRowComponents.

    Example

    const pinnedRow = this.grid.pinnedRows;
    

    Returns IgcGridRowComponent[]

  • 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

  • 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

  • get processedRootRecords(): IgcTreeGridRecord[]
  • Returns IgcTreeGridRecord[]

  • set processedRootRecords(value): void
  • Returns an array of processed (filtered and sorted) root ITreeGridRecords.

    // gets the processed root record with index=2
    const states = this.grid.processedRootRecords[2];

    Memberof

    IgxTreeGridComponent

    Parameters

    Returns void

  • get resourceStrings(): IgcGridResourceStrings
  • Returns IgcGridResourceStrings

  • set resourceStrings(value): void
  • Gets/Sets the resource strings.

    Remarks

    By default it uses EN resources.

    Parameters

    Returns void

  • get rootRecords(): IgcTreeGridRecord[]
  • Returns IgcTreeGridRecord[]

  • set rootRecords(value): void
  • Returns an array of the root level ITreeGridRecords.

    // gets the root record with index=2
    const states = this.grid.rootRecords[2];

    Memberof

    IgxTreeGridComponent

    Parameters

    Returns void

  • 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

  • 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

  • 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

  • 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

  • get rowList(): IgcRowDirective[]
  • A list of IgxGridRowComponent.

    Example

    const rowList = this.grid.rowList;
    

    Returns IgcRowDirective[]

  • get rowLoadingIndicatorTemplate(): IgcRenderFunction<void>
  • Returns IgcRenderFunction<void>

  • set rowLoadingIndicatorTemplate(value): void
  • An

    Input

    property that provides a template for the row loading indicator when load on demand is enabled.

    <ng-template #rowLoadingTemplate>
    <igx-icon>loop</igx-icon>
    </ng-template>

    <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'"
    [loadChildrenOnDemand]="loadChildren"
    [rowLoadingIndicatorTemplate]="rowLoadingTemplate">
    </igx-tree-grid>

    Memberof

    IgxTreeGridComponent

    Parameters

    Returns void

  • 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

  • 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

  • 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

  • get selectedCells(): IgcCellType[]
  • Returns an array of the selected IgxGridCells.

    Example

    const selectedCells = this.grid.selectedCells;
    

    Returns IgcCellType[]

  • 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

  • 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;
    

    Parameters

    • value: boolean

    Returns void

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • get summaryRowHeight(): number
  • Returns number

  • set summaryRowHeight(value): void
  • Get/Set IgxSummaryRow height

    Parameters

    • value: number

    Returns void

  • 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

  • get unpinnedColumns(): IgcColumnComponent[]
  • Gets an array of unpinned IgxColumnComponents.

    Example

    const unpinnedColumns = this.grid.unpinnedColumns.
    

    Returns IgcColumnComponent[]

  • 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

  • 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

  • get visibleColumns(): IgcColumnComponent[]
  • Returns an array of visible IgxColumnComponents.

    Example

    const visibleColumns = this.grid.visibleColumns.
    

    Returns IgcColumnComponent[]

  • 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

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this, ev) => any)
        • (this, ev): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

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

    Returns void

  • Creates a new IgxTreeGridRowComponent with the given data. If a parentRowID is not specified, the newly created row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches the specified parentRowID. If the parentRowID does not exist, an error would be thrown.

    const record = {
    ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
    Name: this.newRecord
    };
    this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.

    Memberof

    IgxTreeGridComponent

    Parameters

    • data: any
    • Optional parentRowID: any

    Returns 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

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

    Returns void

  • Parameters

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

    Returns Animation

  • 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

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

    Returns void

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: T

    Returns T

  • Creates a shadow root for element and returns it.

    Parameters

    • init: ShadowRootInit

    Returns ShadowRoot

  • 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

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

    Returns 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

    • Optional asChild: boolean

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

    Returns void

  • Enters add mode by spawning the UI with the context of the specified row by index.

    Remarks

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

    Example

    this.grid.beginAddRowByIndex(10);
    this.grid.beginAddRowByIndex(10, true);
    this.grid.beginAddRowByIndex(null);

    Parameters

    • index: number

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

    • Optional asChild: boolean

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

    Returns void

  • Returns void

  • Deselect selected cells.

    Example

    this.grid.clearCellSelection();
    

    Returns 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

    • Optional name: string

    Returns void

  • Removes all the highlights in the cell.

    Example

    this.grid.clearSearch();
    

    Returns 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

    • Optional name: string

    Returns void

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

    Parameters

    • Optional deep: boolean

    Returns Node

  • Closes the advanced filtering dialog.

    Parameters

    • applyChanges: boolean

      indicates whether the changes should be applied

    Returns void

  • 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]

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selector: K

    Returns SVGElementTagNameMap[K]

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns E

  • Collapses all rows.

    this.grid.collapseAll();
    

    Memberof

    IgxTreeGridComponent

    Returns 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

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

    Parameters

    • other: Node

    Returns number

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

    Parameters

    • other: Node

    Returns boolean

  • 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

  • Deselects all columns

    Example

    this.grid.deselectAllColumns();
    

    Returns 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

    • Optional onlyFilterData: boolean

    Returns void

  • Deselect specified columns by field.

    Example

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

    Parameters

    Returns void

  • Deselect specified rows by ID.

    Example

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

    Parameters

    • rowIDs: any[]

    Returns 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

  • 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

  • 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

  • Finishes the row transactions on the current row.

    Remarks

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

    Example

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

    Parameters

    • Optional commit: boolean
    • Optional evt: any

    Returns void

  • Expands all rows.

    this.grid.expandAll();
    

    Memberof

    IgxTreeGridComponent

    Returns 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

  • Filters a single IgxColumnComponent.

    Example

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

    Parameters

    Returns void

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

    Example

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

    Parameters

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

    Returns void

  • 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.

    • Optional caseSensitive: boolean

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

    • Optional exactMatch: boolean

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

    Returns 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.

    • Optional caseSensitive: boolean

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

    • Optional exactMatch: boolean

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

    Returns number

  • Parameters

    • Optional options: FocusOptions

    Returns void

  • Parameters

    • Optional options: GetAnimationsOptions

    Returns Animation[]

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

    Parameters

    • qualifiedName: string

    Returns 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

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

    Returns string[]

  • Parameters

    • qualifiedName: string

    Returns Attr

  • Parameters

    • namespace: string
    • localName: string

    Returns Attr

  • Returns a CellType object that matches the conditions.

    Example

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

    Parameters

    • rowIndex: number
    • columnField: string

    Returns 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

  • Parameters

    Returns void

  • 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>

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<HTMLElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • qualifiedName: K

    Returns HTMLCollectionOf<SVGElementTagNameMap[K]>

  • Parameters

    • qualifiedName: string

    Returns HTMLCollectionOf<Element>

  • Parameters

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

    Returns HTMLCollectionOf<HTMLElement>

  • Parameters

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

    Returns HTMLCollectionOf<SVGElement>

  • Parameters

    • namespace: string
    • localName: string

    Returns HTMLCollectionOf<Element>

  • Gets the width to be set on IgxGridHeaderGroupComponent.

    Parameters

    Returns string

  • 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
    • Optional callback: any

    Returns IgcCellPosition

  • Gets calculated width of the pinned area.

    Example

    const pinnedWidth = this.grid.getPinnedWidth();
    

    Parameters

    • Optional takeHidden: boolean

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

    Returns void

  • 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
    • Optional callback: any

    Returns IgcCellPosition

  • Returns node's root.

    Parameters

    • Optional options: GetRootNodeOptions

    Returns Node

  • Returns the IgxTreeGridRow by index.

    Example

    const myRow = treeGrid.getRowByIndex(1);
    

    Parameters

    • index: number

    Returns IgcRowType

  • Returns the RowType object by the specified primary key.

    Example

    const myRow = this.treeGrid.getRowByIndex(1);
    

    Parameters

    • key: any

    Returns IgcRowType

  • 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

  • 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

    • Optional formatters: boolean
    • Optional headers: boolean

    Returns void

  • 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

    • Optional formatters: boolean
    • Optional headers: boolean

    Returns any[]

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

    Parameters

    • qualifiedName: string

    Returns boolean

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

    Parameters

    • namespace: string
    • localName: string

    Returns boolean

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

    Returns boolean

  • Returns whether node has children.

    Returns boolean

  • Parameters

    • pointerId: number

    Returns boolean

  • Parameters

    • where: InsertPosition
    • element: Element

    Returns Element

  • Parameters

    • position: InsertPosition
    • text: string

    Returns void

  • Parameters

    • where: InsertPosition
    • data: string

    Returns void

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: T
    • child: Node

    Returns T

  • Parameters

    • namespace: string

    Returns boolean

  • Returns whether node and otherNode have the same properties.

    Parameters

    • otherNode: Node

    Returns boolean

  • Returns whether the record is pinned or not.

    Parameters

    • rowIndex: number

      Index of the record in the filteredSortedData collection.

    Returns void

  • Parameters

    • otherNode: Node

    Returns boolean

  • Parameters

    • namespace: string

    Returns string

  • 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

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

    Parameters

    • selectors: string

    Returns boolean

  • 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
    • Optional visibleColIndex: number
    • Optional cb: any

    Returns void

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

    Returns void

  • Pins a column by field name.

    Remarks

    Returns whether the operation is successful.

    Example

    this.grid.pinColumn("ID");
    

    Parameters

    • columnName: string
    • Optional index: any

    Returns 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.

    • Optional index: number

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

    Returns boolean

  • 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

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

    Returns void

  • 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]

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns SVGElementTagNameMap[K]

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns E

  • Returns all element descendants of node that match selectors.

    Type parameters

    Type Parameters

    • K extends keyof HTMLElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<HTMLElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • K extends keyof SVGElementTagNameMap

    Parameters

    • selectors: K

    Returns NodeListOf<SVGElementTagNameMap[K]>

  • Type parameters

    Type Parameters

    • E extends Element<E> = Element

    Parameters

    • selectors: string

    Returns NodeListOf<E>

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

    Example

    this.grid1.recalculateAutoSizes();
    

    Returns 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

  • Reapplies the existing search.

    Remarks

    Returns how many times the grid contains the last search.

    Example

    this.grid.refreshSearch();
    

    Parameters

    • Optional updateActiveInfo: boolean
    • Optional endEdit: boolean

    Returns number

  • Removes node.

    Returns void

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

    Parameters

    • qualifiedName: string

    Returns void

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

    Parameters

    • namespace: string
    • localName: string

    Returns void

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • child: T

    Returns T

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: ((this, ev) => any)
        • (this, ev): any
        • Parameters

          • this: HTMLElement
          • ev: HTMLElementEventMap[K]

          Returns any

    • Optional options: boolean | EventListenerOptions

    Returns void

  • Parameters

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

    Returns void

  • Type parameters

    Type Parameters

    • T extends Node<T>

    Parameters

    • node: Node
    • child: T

    Returns T

  • 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

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

    Returns 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

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

    Returns 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

    • Optional options: FullscreenOptions

    Returns Promise<void>

  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Parameters

    • Optional arg: boolean | ScrollIntoViewOptions

    Returns void

  • Parameters

    • Optional options: ScrollToOptions

    Returns void

  • Parameters

    • x: number
    • y: number

    Returns void

  • Selects all columns

    Example

    this.grid.deselectAllColumns();
    

    Returns 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

    • Optional onlyFilterData: boolean

    Returns void

  • Select specified columns.

    Example

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

    Parameters

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

      if true clears the current selection

    Returns void

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

    Parameters

    Returns void

  • Select specified rows by ID.

    Example

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

    Parameters

    • rowIDs: any[]
    • Optional clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

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

    Parameters

    • qualifiedName: string
    • value: string

    Returns 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

  • 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

  • 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
    • Optional force: boolean

    Returns boolean

  • 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