Sets or gets the altrows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [altrows]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the altstart property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [altstart]="1">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the altstep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [altstep]="2">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autoshowloadelement property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoshowloadelement]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autoshowfiltericon property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoshowfiltericon]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autoshowcolumnsmenubutton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoshowcolumnsmenubutton]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { 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' }
  ];

  
}

Sets a custom command column rendering function

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 clipboard property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [clipboard]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Enables or disables the Card View mode

Sets or gets the card height property.

Sets or gets the cards displayed per row.

Sets the card view columns array. Expects the same structure as the columns array.

Sets or gets the closeablegroups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [closeablegroups]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsmenuwidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsmenuwidth]="40">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnmenuopening property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnmenuopening]="columnmenuopening">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnmenuclosing property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnmenuclosing]="columnmenuclosing">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the cellhover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [cellhover]="cellhover">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enablekeyboarddelete property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enablekeyboarddelete]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enableellipsis property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enableellipsis]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enablemousewheel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enablemousewheel]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enableanimations property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enableanimations]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enabletooltips property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enabletooltips]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enablehover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enablehover]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the enablebrowserselection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [enablebrowserselection]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridEverPresentRowPosition {
     top,
     bottom,
     topAboveFilterRow
}

Sets or gets the everpresentrowposition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [everpresentrowposition]="'bottom'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the everpresentrowheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [everpresentrowheight]="32">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the everpresentrowactions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [everpresentrowactions]="'add update delete reset'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridEverPresentRowActionsMode {
     popup,
     columns
}

Sets or gets the everpresentrowactionsmode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [everpresentrowactionsmode]="'popup'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the filterrowheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterrowheight]="35">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridFilterMode {
     default,
     excel
}

Sets or gets the filtermode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [filtermode]="'excel'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupsrenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groups]="['firstname']" [groupsrenderer]="groupsrenderer">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupcolumnrenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groups]="['firstname']" [groupcolumnrenderer]="groupcolumnrenderer">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupsexpandedbydefault property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groups]="['firstname']" [groupsexpandedbydefault]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the handlekeyboardnavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [handlekeyboardnavigation]="handlekeyboardnavigation">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pagerrenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pagerrenderer]="pagerrenderer" [pageable]="pageable">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rtl]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showdefaultloadelement property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showdefaultloadelement]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showfiltercolumnbackground property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showfiltercolumnbackground]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showfiltermenuitems property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showfiltermenuitems]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showpinnedcolumnbackground property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showpinnedcolumnbackground]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showsortcolumnbackground property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showsortcolumnbackground]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showsortmenuitems property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showsortmenuitems]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showgroupmenuitems property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showgroupmenuitems]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showrowdetailscolumn property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showrowdetailscolumn]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showheader property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showheader]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showgroupsheader property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showgroupsheader]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showaggregates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showaggregates]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showgroupaggregates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showgroupaggregates]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showeverpresentrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showeverpresentrow]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showfilterrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterable]="true" [showfilterrow]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showemptyrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showemptyrow]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showstatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showstatusbar]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the statusbarheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showstatusbar]="true" [statusbarheight]="50">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the showtoolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [showtoolbar]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridSelectionMode {
     none,
     singlerow,
     multiplerows,
     multiplerowsextended,
     singlecell,
     multiplecells,
     multiplecellsextended,
     multiplecellsadvanced,
     checkbox
}

Sets or gets the selectionmode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [selectionmode]="'multiplerows'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the updatefilterconditions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [updatefilterconditions]="updatefilterconditions">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the updatefilterpanel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [updatefilterpanel]="updatefilterpanel">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [theme]="'energyblue'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the toolbarheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [toolbarheight]="40" [showtoolbar]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autoheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [autoheight]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autorowheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autorowheight]="true" [autoheight]="true" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsheight]="33">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the deferreddatafields property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [deferreddatafields]="['firstname']">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupsheaderheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groupable]="true" [groupsheaderheight]="60">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupindentwidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groupindentwidth]="40" [groupable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pagerheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pagerheight]="32" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rowsheight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rowsheight]="30">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the scrollbarsize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [scrollbarsize]="20">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridScrollMode {
     default,
     logical,
     deferred
}

Sets or gets the scrollmode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [scrollmode]="'logical'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the scrollfeedback property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [scrollfeedback]="scrollfeedback" [scrollmode]="deferred">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autosavestate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoloadstate]="true" [autosavestate]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the autoloadstate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoloadstate]="true" [autosavestate]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

interface GridColumn {
     text?: String;
     datafield?: String;
     displayfield?: String;
     sortable?: Boolean;
     filterable?: Boolean;
     filter?: (cellValue?: Any, rowData?: Any, dataField?: String, filterGroup?: Any, defaultFilterResult?: Any) => Any;
     hideable?: Boolean;
     hidden?: Boolean;
     groupable?: Boolean;
     menu?: Boolean;
     exportable?: Boolean;
     columngroup?: String;
     enabletooltips?: Boolean;
     renderer?: (defaultText?: String, alignment?: String, height?: Number) => String;
     rendered?: (columnHeaderElement?: Any) => Void;
     cellsrenderer?: (row?: Number, columnfield?: String, value?: Any, defaulthtml?: String, columnproperties?: Any, rowdata?: Any) => String;
     columntype?: GridColumnType;
     validation?: (cell?: Any, value?: Number) => Any;
     createwidget?: (row: Any, column: Any, value: String, cellElement: Any) => Void;
     initwidget?: (row: Number, column: String, value: String, cellElement: Any) => Void;
     createfilterwidget?: (column: Any, htmlElement: Any, editor: Any) => Void;
     createfilterpanel?: (datafield: String, filterPanel: Any) => Void;
     initeditor?: (row: Number, cellvalue: Any, editor: Any, celltext: Any, pressedChar: String, callback: Any) => Void;
     createeditor?: (row: Number, cellvalue: Any, editor: Any, celltext: Any, cellwidth: Any, cellheight: Any) => Void;
     destroyeditor?: (row: Number, callback: Any) => Void;
     geteditorvalue?: (row: Number, cellvalue:Any, editor:Any) => Any;
     cellbeginedit?: (row: Number, datafield: String, columntype: String) => Boolean;
     cellendedit?: (row: Number, datafield: String, columntype: String, oldvalue: Any, newvalue: Any) => Boolean;
     cellvaluechanging?: (row: Number, datafield: String, columntype: String, oldvalue: Any, newvalue: Any) => String;
     createeverpresentrowwidget?: (datafield: String, htmlElement: Any, popup: Any, addRowCallback: Any) => Any;
     initeverpresentrowwidget?: (datafield: String, htmlElement: Any, popup: Any) => Void;
     reseteverpresentrowwidgetvalue?: (htmlElement: Any) => Void;
     geteverpresentrowwidgetvalue?: (datafield: String, htmlElement: Any) => Any;
     destroyeverpresentrowwidget?: (htmlElement: Any) => Void;
     validateeverpresentrowwidgetvalue?: (datafield: String, value: Any, rowValues: Any) => Boolean;
     cellsformat?: GridCellsFormat;
     aggregates?: Any;
     align?: GridAlign;
     cellsalign?: GridAlign;
     width?: Number | String;
     minwidth?: Any;
     maxwidth?: Any;
     resizable?: Boolean;
     draggable?: Boolean;
     editable?: Boolean;
     classname?: String;
     pinned?: Boolean;
     nullable?: Boolean;
     filteritems?: Any;
     filterdelay?: Number;
     filtertype?: GridFilterType;
     filtercondition?: GridFilterCondition;
}
interface GridColumnType {
     Number?: String;
     checkbox?: (threestatecheckbox: Boolean) => Void;
     numberinput?: String;
     dropdownlist?: String;
     combobox?: String;
     datetimeinput?: String;
     textbox?: String;
     template?: String;
     custom?: String;
}
enum GridCellsFormat {
     d,
     f,
     n,
     c,
     p,
     d,
     dd,
     ddd,
     dddd,
     h,
     hh,
     H,
     HH,
     m,
     mm,
     M,
     MM,
     MMM,
     MMMM,
     s,
     ss,
     t,
     tt,
     y,
     yy,
     yyy,
     yyyy
}

Sets or gets the columns property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columngroups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsmenu property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsmenu]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsresize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsresize]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsautoresize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsautoresize]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the columnsreorder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsreorder]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [disabled]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the editable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [editable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridEditMode {
     click,
     selectedcell,
     selectedrow,
     dblclick,
     programmatic
}

Sets or gets the editmode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [editable]="true" [editmode]="'dblclick'">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the filter property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [filter]="filter">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the filterable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groupable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groupable]="true" [groups]="['firstname']">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the groups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [groupable]="true" [groups]="['firstname']">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the horizontalscrollbarstep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [horizontalscrollbarstep]="60">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the horizontalscrollbarlargestep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [horizontalscrollbarlargestep]="600">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the initrowdetails property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [initrowdetails]="initrowdetails">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the keyboardnavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [keyboardnavigation]="false">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the localization property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [localization]="localization">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pagesize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pagesize]="30" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pagesizeoptions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pagesizeoptions]="['15', '30', '50']" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridPagerMode {
     simple,
     pagermode
}

Sets or gets the pagermode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pagermode]="'simple'" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pagerbuttonscount property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerbuttonscount]="10">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the pageable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rowdetails property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rowdetails]="rowdetails">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rowdetailstemplate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rowdetailstemplate]="rowdetailstemplate">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the ready property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [ready]="ready">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rendered property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rendered]="rendered">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the renderstatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [renderstatusbar]="renderstatusbar">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rendertoolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [rendertoolbar]="rendertoolbar">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the rendergridrows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [virtualmode]="true" [rendergridrows]="rendergridrows">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the sortable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [sortable]="true">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the selectedrowindex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [selectedrowindex]="3">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the selectedrowindexes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [selectedrowindexes]="[3,5,10]">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

enum GridSortToggleStates {
     0,
     1,
     2
}

Sets or gets the sorttogglestates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [sortable]="true" [sorttogglestates]="1">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the updatedelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [updatedelay]="20">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the virtualmode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [virtualmode]="true" [rendergridrows]="rendergridrows">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the verticalscrollbarstep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [verticalscrollbarstep]="200">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Sets or gets the verticalscrollbarlargestep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns" [verticalscrollbarlargestep]="2000">
        </jqxGrid>
    `
})
 
export class AppComponent {
    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

This event is triggered when the binding is completed. Note: Bind to that event before the Grid's initialization, because if you data bind the Grid to a local data source and bind to the "bindingcomplete" event after the initializaation, the data binding will be already completed.

Code examples

Bind to the bindingcomplete event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onBindingcomplete)="Bindingcomplete($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Bindingcomplete(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a Grid Column is resized.

Code examples

Bind to the columnresized event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onColumnresized)="Columnresized($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Columnresized(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a Grid Column is moved to a new position.

Code examples

Bind to the columnreordered event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onColumnreordered)="Columnreordered($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Columnreordered(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a column is clicked.

Code examples

Bind to the columnclick event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onColumnclick)="Columnclick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Columnclick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell is clicked.

Code examples

Bind to the cellclick event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellclick)="Cellclick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellclick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell is double-clicked.

Code examples

Bind to the celldoubleclick event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCelldoubleclick)="Celldoubleclick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Celldoubleclick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell is selected.

Code examples

Bind to the cellselect event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellselect)="Cellselect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellselect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell is unselected.

Code examples

Bind to the cellunselect event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellunselect)="Cellunselect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellunselect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell's value is changed.

Code examples

Bind to the cellvaluechanged event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellvaluechanged)="Cellvaluechanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellvaluechanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell's editor is displayed.

Code examples

Bind to the cellbeginedit event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellbeginedit)="Cellbeginedit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellbeginedit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a cell's edit operation has ended.

Code examples

Bind to the cellendedit event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onCellendedit)="Cellendedit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Cellendedit(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when the Grid is filtered.

Code examples

Bind to the filter event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onFilter)="Filter($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Filter(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a group is added, inserted or removed.

Code examples

Bind to the groupschanged event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onGroupschanged)="Groupschanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Groupschanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a group is expanded.

Code examples

Bind to the groupexpand event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onGroupexpand)="Groupexpand($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Groupexpand(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a group is collapsed.

Code examples

Bind to the groupcollapse event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onGroupcollapse)="Groupcollapse($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Groupcollapse(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when the current page is changed.

Code examples

Bind to the pagechanged event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onPagechanged)="Pagechanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Pagechanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when the page size is changed.

Code examples

Bind to the pagesizechanged event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onPagesizechanged)="Pagesizechanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Pagesizechanged(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row is clicked.

Code examples

Bind to the rowclick event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowclick)="Rowclick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowclick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row is double clicked.

Code examples

Bind to the rowdoubleclick event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowdoubleclick)="Rowdoubleclick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowdoubleclick(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row is selected.

Code examples

Bind to the rowselect event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowselect)="Rowselect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowselect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row is unselected.

Code examples

Bind to the rowunselect event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowunselect)="Rowunselect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowunselect(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row with details is expanded.

Code examples

Bind to the rowexpand event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowexpand)="Rowexpand($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowexpand(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when a row with details is collapsed.

Code examples

Bind to the rowcollapse event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onRowcollapse)="Rowcollapse($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Rowcollapse(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

This event is triggered when the Grid is sorted.

Code examples

Bind to the sort event of jqxGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid (onSort)="Sort($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent {
    Sort(event: any): void 
    {
        // Do Something
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}


							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.autoresizecolumns();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.autoresizecolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.beginupdate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.clear();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.destroy();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.endupdate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.ensurerowvisible(10);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.focus();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcolumnindex(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetColumn {
     datafield?: String;
     displayfield?: String;
     text?: String;
     sortable?: Boolean;
     filterable?: Boolean;
     exportable?: Boolean;
     editable?: Boolean;
     groupable?: Boolean;
     resizable?: Boolean;
     draggable?: Boolean;
     classname?: String;
     cellclassname?: String;
     width?: Number | String;
     menu?: Boolean;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcolumnproperty('firstname','text');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrowid(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrowdata(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrowdatabyid(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrowboundindexbyid(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrowboundindex(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrows();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getboundrows();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getdisplayrows();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetDataInformation {
     rowscount?: String;
     sortinformation?: Any;
     sortcolumn?: Any;
     sortdirection?: Any;
     paginginformation?: Any;
     pagenum?: Any;
     pagesize?: Any;
     pagescount?: Any;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getdatainformation();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetSortInformation {
     sortcolumn?: String;
     sortdirection?: Any;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getsortinformation();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetPagingInformation {
     pagenum?: String;
     pagesize?: Any;
     pagescount?: Any;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getpaginginformation();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.hidecolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.hideloadelement();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.hiderowdetails(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.iscolumnvisible('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.iscolumnpinned('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.localizestrings();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.pincolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.refreshdata();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.refresh();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.render();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.scrolloffset(120,100);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridScrollPosition {
     top?: Number;
     left?: Number;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.scrollposition();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.showloadelement();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.showrowdetails(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.setcolumnindex('firstname',0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.setcolumnproperty('firstname','text','New Name');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.showcolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.unpincolumn('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.updatebounddata();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.updating();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getsortcolumn();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.removesort();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.sortby('firstname','asc');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.addgroup('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.cleargroups();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.collapsegroup(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.collapseallgroups();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.expandallgroups();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.expandgroup(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getrootgroupscount();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetGroup {
     group?: Number;
     level?: Number;
     expanded?: Number;
     subgroups?: Number;
     subrows?: Number;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getgroup(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.insertgroup(0,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.iscolumngroupable('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.removegroupat(0);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.removegroup('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.addfilter();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.applyfilters();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.clearfilters();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getfilterinformation();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcolumnat(5);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.removefilter('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.refreshfilterrow();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.gotopage(2);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.gotoprevpage();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.gotonextpage();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.addrow(1,{firstname: 'New Name'});
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.begincelledit(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.beginrowedit(1);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.closemenu();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.deleterow(1);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.endcelledit(1,'firstname',true);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.endrowedit(1,true);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetCell {
     value?: Number;
     row?: Number;
     column?: Number;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcell(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetCell {
     value?: Number;
     row?: Number;
     column?: Number;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcellatposition(10,100);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcelltext(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcelltextbyid(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcellvaluebyid(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcellvalue(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.isBindingCompleted();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.openmenu('firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.setcellvalue(1,'firstname','New Name');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.setcellvaluebyid(1,'firstname','New Name');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.showvalidationpopup(1,'firstname','Error message');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.updaterow(1,{firstname: 'New Name'});
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.clearselection();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getselectedrowindex();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getselectedrowindexes();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetSelectedCell {
     rowindex?: Number;
     datafield?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getselectedcell();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetSelectedCell {
     rowindex?: Number;
     datafield?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getselectedcells();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.selectcell(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.selectallrows();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.selectrow(1);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.unselectrow(1);
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.unselectcell(1,'firstname');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getcolumnaggregateddata();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.refreshaggregates();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.renderaggregates();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.exportdata('xls,'grid.xls');
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetState {
     width?: String | Number;
     height?: String | Number;
     pagenum?: Number;
     pagesize?: Number;
     pagesizeoptions?: Array<String>;
     sortcolumn?: Any;
     sortdirection?: Any;
     filters?: Any;
     groups?: Any;
     columns?: GridGetStateColumns;
}
interface GridGetStateColumns {
     width?: String | Number;
     hidden?: Boolean;
     index?: Number;
     pinned?: Boolean;
     groupable?: Boolean;
     resizable?: Boolean;
     draggable?: Boolean;
     text?: String;
     align?: String;
     cellsalign?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.getstate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myGrid.loadstate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

							

						

interface GridGetState {
     width?: String | Number;
     height?: String | Number;
     pagenum?: Number;
     pagesize?: Number;
     pagesizeoptions?: Array<String>;
     sortcolumn?: Any;
     sortdirection?: Any;
     filters?: Any;
     groups?: Any;
     columns?: GridGetStateColumns;
}
interface GridGetStateColumns {
     width?: String | Number;
     hidden?: Boolean;
     index?: Number;
     pinned?: Boolean;
     groupable?: Boolean;
     resizable?: Boolean;
     draggable?: Boolean;
     text?: String;
     align?: String;
     cellsalign?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myGrid.savestate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}