Enables or disables the alternating rows.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [altrows]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

This property specifies the first alternating row.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [altrows]='true' [altstart]='2'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the alternating step

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [altrows]='true' [altstart]='0' [altstep]='2'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether the loading image should be displayed until the Grid's data is loaded.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [autoshowloadelement]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [autoshowfiltericon]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [autoshowcolumnsmenubutton]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether the columns lines are displayed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showcolumnlines]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether the row lines are displayed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showrowlines]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether the column header lines are displayed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showcolumnheaderlines]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether adaptive mode is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [adaptive]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether compact mode is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [compact]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the Grid's breakpoint width when adaptive mode is actived.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [adaptive]='true' [adaptivewidth]='400'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets whether command column is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [commandcolumn]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Enables or disables the clipboard operations

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [clipboard]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

When the value of this property is true, a close button is displayed in each grouping column.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [groups]='["City"]' [closeablegroups]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the columns menu width.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [autoshowcolumnsmenubutton]='false' [columnsmenuwidth]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [columnmenuopening]='columnmenuopening' [filterable]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public columnmenuopening(menu?: any, datafield?: any, height?: number | string): boolean | void {
    alert('Menu Opening');
  }
}

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [columnmenuclosing]='columnmenuclosing' [filterable]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public columnmenuclosing(menu?: any, datafield?: any, height?: number | string): boolean {
    alert('Menu Closing');
  }
}

Callback called when a cell is hovered.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [cellhover]='cellhover'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public cellhover(cellhtmlElement?: any, x?: any, y?: any): void {
    alert('Cell Hovered!');
  }
}

Enables or disables the delete of a cell/row values by using the "delete" key.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [editable]='true' [enablekeyboarddelete]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether ellipsis will be displayed, if the cells or columns content overflows.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [enableellipsis]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether mousewheel scrolling is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='100' [enablemousewheel]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Enables or disables the grid animations.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [enableanimations]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Enables or disables the grid tooltips.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [enabletooltips]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Enables or disables the grid rows hover state.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [enablehover]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Enables the text selection of the browser.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [enablebrowserselection]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showeverpresentrow]='true' [everpresentrowposition]='"bottom"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the height of the ever present row.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showeverpresentrow]='true' [everpresentrowheight]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete". Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showeverpresentrow]='true' [everpresentrowactions]='"add update delete reset"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="850" [source]="source" [columns]="columns" [autoheight]="true" [showeverpresentrow]="true"
       [everpresentrowactionsmode]="'columns'" >
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' },
    { datafield: 'addButtonColumn', width: 50 },
    { datafield: 'resetButtonColumn', width: 50 }
  ];
}

Sets or gets the filter row's height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [showfilterrow]='true' [filterrowheight]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [filtermode]='"excel"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

This function is called when a group is rendered. You can use it to customize the default group rendering.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupsrenderer]='groupsrenderer' [groupable]='true' [groups]='["City"]'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public groupsrenderer(text?: string, group?: number, expanded?: boolean, data?: object): string {
    return 'City: ' + group;
  }
}

Sets or gets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupcolumnrenderer]='groupcolumnrenderer' [groupable]='true' [groups]='["City"]'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public groupcolumnrenderer(text?: any): string {
    return 'Grouped By: ' + text;
  }
}

Sets or gets the default state of the grouped rows.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [groups]='["ContactName"]' [groupsexpandedbydefault]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overriden for the pressed key.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [handlekeyboardnavigation]='handlekeyboardnavigation'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public handlekeyboardnavigation(): boolean {
    // const key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
         // alert(key);
  }
}

The function is called when the Grid Pager is rendered. This allows you to customize the default rendering of the pager.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [pagerrenderer]='pagerrenderer' [pageable]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public pagerrenderer(): any[] {
    const element = document.createElement('div');
        element.innerHTML = 'Custom Render of the JqxGrid Pager!';
        return element;
  }
}

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [rtl]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether the Grid should display the built-in loading element or should use a DIV tag with class 'jqx-grid-load'

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showdefaultloadelement]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [showfiltercolumnbackground]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether to display the filtering items in the column's menu.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [showfiltermenuitems]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="500" [source]="source" [columns]="columns" [autoheight]="true" [showpinnedcolumnbackground]="false" >
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { pinned: true, text: 'Contact Name', datafield: 'ContactName', width: 150 },
    { text: 'Contact Title', datafield: 'Title', width: 150 },
    { text: 'City', datafield: 'City', width: 150 },
    { text: 'Country', datafield: 'Country', width: 150 },
    { text: 'Country1', width: 150 },
    { text: 'Country2', width: 150 },
    { text: 'Country3', width: 150 },
    { text: 'Country4', width: 150 },
    { text: 'Country5', width: 150 }
  ];
}

When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [sortable]='true' [showsortcolumnbackground]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether to display the sort menu items.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [sortable]='true' [showsortmenuitems]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether to display the group menu items.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [showgroupmenuitems]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [rowdetails]='true' [showrowdetailscolumn]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the columns header.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showheader]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the groups header area.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [showgroupsheader]='false'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the aggregates in the grid's statusbar.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="850" [source]="source" [columns]="columns" [autoheight]="true" [showaggregates]="true" [showstatusbar]="true" [statusbarheight]="50">
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    {
      text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
        'Owners': function (aggregatedValue, currentValue) {
          if (currentValue == 'Owner') {
            return aggregatedValue + 1;
          }
          return aggregatedValue;
        }
      }]
    },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country', aggregates: ['count'] }
  ];
}

Shows or hides the aggregates in Grid groups.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="850" [source]="source" [columns]="columns" [autoheight]="true" [groupable]="true" 
       [showaggregates]="true" [showgroupaggregates]="true" [showstatusbar]="true" [statusbarheight]="50" >
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    {
      text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
        'Owners': function (aggregatedValue, currentValue) {
          if (currentValue == 'Owner') {
            return aggregatedValue + 1;
          }
          return aggregatedValue;
        }
      }]
    },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country', aggregates: ['count'] }
  ];
}

Shows or hides an additional row in jqxGrid which allows you to easily add new rows.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showeverpresentrow]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the filter row.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [filterable]='true' [showfilterrow]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the empty row label when the Grid has no records to display.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="850" [columns]="columns" [autoheight]="true" [showemptyrow]="false" >
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ]
      }
    };
}

Shows or hides the grid's statusbar.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showstatusbar]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the statusbar's height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showstatusbar]='true' [statusbarheight]='50'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the grid's toolbar.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showtoolbar]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Shows or hides the grid's filter bar.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showfilterbar]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the selection mode.

'none'-disables the selection

'singlerow'- full row selection

'multiplerows' - each click selects a new row. Click on a selected row unselects it

'multiplerowsextended' - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop

'singlecell' - single cell selection

'multiplecells' - each click selects a new cell. Click on a selected cell unselects it

'multiplecellsextended' - in this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop

'multiplecellsadvanced' - this mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of cells in a spreadsheet

'checkbox' - multiple rows selection through a checkbox.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [selectionmode]='"multiplerows"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]="800" [source]="source" [autoheight]="true" [columns]="columns" 
       [filterable]="true" [autoshowfiltericon]="true" [ready]="ready"
       [updatefilterconditions]="updatefilterconditions" [updatefilterpanel]="updatefilterpanel">
  </JqxGrid>,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  addfilter(e: Event): any {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions(e: Event): any {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready(e: Event): any {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]="800" [source]="source" [autoheight]="true" [columns]="columns" 
       [filterable]="true" [autoshowfiltericon]="true" [ready]="ready"
       [updatefilterconditions]="updatefilterconditions" [updatefilterpanel]="updatefilterpanel">
  </JqxGrid>,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  addfilter(e: Event): any {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions(e: Event): any {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready(e: Event): any {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [theme]='"material"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the toolbar's height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [showtoolbar]='true' [toolbarheight]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

This property works along with the "autoheight" property. When it is set to true, the height of the Grid rows is dynamically changed depending on the cell values.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [autorowheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the columns height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [columnsheight]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines the cell values displayed in a tooltip next to the scrollbar when the "scrollmode" is set to "deferred".

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='100' [scrollmode]='"deferred"' [deferreddatafields]='["ContactName"]'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the height of the Grid Groups Header.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [groupsheaderheight]='60'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [groupable]='true' [groupindentwidth]='40'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the Grid's height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='500'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the height of the Grid Pager.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [pageable]='true' [pagerheight]='50'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the height of the grid rows.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [rowsheight]='30'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets or gets the scrollbars size.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='100' [scrollbarsize]='20'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines the scrolling mode.

'default'

'logical'- the movement of the scrollbar thumb is by row, not by pixel

'deferred'-content is stationary when the user drags the Thumb of a ScrollBar

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='100' [scrollmode]='"logical"'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='false'
       [height]='100' [scrollmode]='"deferred"' [scrollfeedback]='scrollfeedback'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
  
  public scrollfeedback(row?: object): string {
    return 'row ' + row.uid;
  }
}

Sets or gets the Grid's width.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether the Grid automatically saves its current state.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [autoloadstate]='true' [autosavestate]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Determines whether the Grid automatically loads its current state(if there's already saved one). The Grid's state is loaded when the page is refreshed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'
       [autoloadstate]='true' [autosavestate]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

Sets the Grid columns.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid 
       [width]='850' [source]='dataAdapter' [columns]='columns' [autoheight]='true'>
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
  
  public source = {
    localdata: [
      [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
      [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
      [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName' },
    { text: 'Contact Title', datafield: 'Title' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  
}

• parentgroup - sets the column header's parent group name.
• name - sets the column header's name.
• align - sets the column header's alignment to 'left', 'center' or 'right'.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
  
@Component({
  selector: 'app-root',
  template:
    `<jqxGrid #myGrid
       [width]="850" [source]="source" [columns]="columns" [autoheight]="true" [columngroups]="columngroups" >
    </jqxGrid>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;
    
public source = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
    ],
    datafields: [
      { name: 'ContactName', type: 'string', map: '0' },
      { name: 'Title', type: 'string', map: '1' },
      { name: 'City', type: 'string', map: '2' },
      { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };
  public dataAdapter = new jqx.dataAdapter(this.source);
  public columns = [
    { text: 'Contact Name', datafield: 'ContactName', columngroup: 'ContactInfo' },
    { text: 'Contact Title', datafield: 'Title', columngroup: 'ContactInfo' },
    { text: 'City', datafield: 'City' },
    { text: 'Country', datafield: 'Country' }
  ];
  public columngroups = [{ text: 'Contact Info', name: 'ContactInfo', align: 'center' }];
}