Properties

NameTypeDefault
altRows Boolean false

Sets or gets the altRows property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [altRows]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
autoRowHeight Boolean true

Sets or gets the autoRowHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [autoRowHeight]="false">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
aggregatesHeight Number 34

Sets or gets the aggregatesHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [aggregatesHeight]="40">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
autoShowLoadElement Boolean true

Sets or gets the autoShowLoadElement property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [autoShowLoadElement]="false">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
columnsHeight Number 30

Sets or gets the columnsHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [columnsHeight]="20">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
columns Array<DataTableColumns> []
interface DataTableColumns {
     text: String;
     dataField: String;
     displayField?: String;
     sortable?: Boolean;
     filterable?: Boolean;
     hidden?: Boolean;
     columnGroup ?: String;
     autoCellHeight?: Boolean;
     renderer?: (text:String, align?:String, height?: Size) => String;
     rendered?: (element:Any, align?:String, height?: Size) => Boolean;
     cellsRenderer?: (row:Number, column?:Any, value?: Any, rowData?:Any) => String;
     columnType?: String;
     validation?: (cell:Number, value?:Any) => Any;
     initEditor?: (row:Number, cellValue?:Any, editor?:Any, cellText?:String, width?:Size, height?:Size) => Void;
     createEditor?: (row:Number, cellValue?:Any, editor?:Any, cellText?:String, width?:Size, height?:Size) => Void;
     getEditorValue?: (row:Number, cellValue?:Any, editor?:Any) => Void;
     cellsFormat?: ColumnFormat;
     aggregates?: Array<String>;
     aggregatesRenderer?: (aggregates:Array<Any>) => String;
     align?: DataTableColumnsAlign;
     cellsAlign?: DataTableColumnsAlign;
     width?: Size;
     minWidth?: Size;
     maxWidth?: Size;
     resizable?: Boolean;
     draggable?: Boolean;
     editable?: Boolean;
     className?: String;
     cellClassName?: Any;
     pinned?: Boolean;
}
enum DataTableColumnsAlign {
     left,
     right,
     center
}

Sets or gets the columns property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
columnGroups Array<DataTableColumnGroups> []
interface DataTableColumnGroups {
     text?: String;
     parentGroup?: String;
     align?: String;
     name?: String;
}

Sets or gets the columnGroups property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [columnGroups]="columnGroups">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
columnsResize Boolean false

Sets or gets the columnsResize property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [columnsResize]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
columnsReorder Boolean false

Sets or gets the columnsReorder property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [columnsReorder]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [disabled]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
editable Boolean false

Sets or gets the editable property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [editable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
editSettings DataTableEditSettings { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }
interface DataTableEditSettings {
     saveOnPageChange?: Boolean;
     saveOnBlur?: Boolean;
     saveOnSelectionChange?: Boolean;
     cancelOnEsc?: Boolean;
     saveOnEnter?: Boolean;
     editSingleCell?: Boolean;
     editOnDoubleClick?: Boolean;
     editOnF2?: Boolean;
}

Sets or gets the editSettings property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [editSettings]="editSettings">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
exportSettings DataTableExportSettings { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"}
interface DataTableExportSettings {
     columnsHeader?: Boolean;
     hiddenColumns?: Boolean;
     serverURL?: Any;
     characterSet?: Any;
     recordsInView?: Boolean;
     fileName?: String;
}

Sets or gets the exportSettings property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [exportSettings]="exportSettings">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
enableHover Boolean true

Sets or gets the enableHover property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [enableHover]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
enableBrowserSelection Boolean false

Sets or gets the enableBrowserSelection property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [enableBrowserSelection]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
filterable Boolean false

Sets or gets the filterable property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [filterable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
filterHeight Number 30

Sets or gets the filterHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [filterHeight]="35" [filterable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
filterMode enum:DataTableFilterMode "default"
enum DataTableFilterMode {
     default,
     simple,
     advanced
}

Sets or gets the filterMode property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [filterable]="true" [filterMode]="'advanced'">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
groups Array<Any> []

Sets or gets the groups property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [groups]='['firstname']'>
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
groupsRenderer (value:Any, rowData?:Any, level?:Number) => String null

Sets or gets the groupsRenderer property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [groupsRenderer]="groupsRenderer">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
height Size null

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [height]="350">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
initRowDetails (id:Number, row?:Any, element?:Any, rowInfo?:Any) => Void null

Sets or gets the initRowDetails property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [initRowDetails]="initRowDetails">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
incrementalSearch Boolean true

Sets or gets the incrementalSearch property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [incrementalSearch]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
localization Any default localization strings.

Sets or gets the localization property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [localization]="localization">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pagerHeight Number 28

Sets or gets the pagerHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pagerHeight]="35" [pageable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pageSize Number 10

Sets or gets the pageSize property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pageSize]="15" [pageable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pageSizeOptions Array<String | Number> ['5', '10', '20']

Sets or gets the pageSizeOptions property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pageSizeOptions]='[15, 25, 35]' [pageable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pageable Boolean false

Sets or gets the pageable property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pageable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pagerPosition enum:DataTablePagerPosition "bottom"
enum DataTablePagerPosition {
     top,
     bottom,
     both
}

Sets or gets the pagerPosition property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pagerPosition]="'top'">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pagerMode enum:DataTablePagerMode "default"
enum DataTablePagerMode {
     default,
     advanced
}

Sets or gets the pagerMode property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pagerMode]="'advanced'">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pagerButtonsCount Number 5

Sets or gets the pagerButtonsCount property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pagerButtonsCount]="10">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
pagerRenderer () => Any null

Sets or gets the pagerRenderer property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [pagerRenderer]="pagerRenderer">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
ready () => Void null

Sets or gets the ready property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [ready]="ready">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
rowDetails Boolean false

Sets or gets the rowDetails property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [rowDetails]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
renderToolbar (toolbar:Any) => Void null

Sets or gets the renderToolbar property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [renderToolbar]="renderToolbar">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
renderStatusbar (statusbar:Any) => Void null

Sets or gets the renderStatusbar property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [renderStatusbar]="renderStatusbar">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
rendering () => Void null

Sets or gets the rendering property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [rendering]="rendering">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
rendered () => Void null

Sets or gets the rendered property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [rendered]="rendered">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [rtl]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
source Any null

Sets or gets the source property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
sortable Boolean false

Sets or gets the sortable property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [sortable]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
showAggregates Boolean false

Sets or gets the showAggregates property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [showAggregates]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
showToolbar Boolean false

Sets or gets the showToolbar property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [showToolbar]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
showStatusbar Boolean false

Sets or gets the showStatusbar property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [showStatusbar]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
statusBarHeight Number 34

Sets or gets the statusBarHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [statusBarHeight]="40">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
scrollBarSize Size 17

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [scrollBarSize]="20">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
selectionMode enum:DataTableSelectionMode "multipleRows"
enum DataTableSelectionMode {
     multipleRows,
     singleRow,
     custom
}

Sets or gets the selectionMode property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [selectionMode]="'singleRow'">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
serverProcessing Boolean false

Sets or gets the serverProcessing property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [serverProcessing]="true">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
showHeader Boolean true

Sets or gets the showHeader property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [showHeader]="false">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [theme]="'energyblue'">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
toolbarHeight Number 34

Sets or gets the toolbarHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850" [toolbarHeight]="40">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}
width Size null

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent {
source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

Events

bindingComplete Event

This event is triggered when the jqxDataTable binding is completed. *Bind to that event before the jqxDataTable's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

cellBeginEdit Event

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

cellEndEdit Event

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

cellValueChanged Event

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

columnResized Event

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

columnReordered Event

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

sort Event

This event is triggered when the jqxDataTable sort order or sort column is changed.

Code examples

Bind to the sort event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

filter Event

This event is triggered when the jqxDataTable's rows filter is changed.

Code examples

Bind to the filter event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

pageChanged Event

This is triggered when the jqxDataTable's current page is changed.

Code examples

Bind to the pageChanged event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

pageSizeChanged Event

This is triggered when the jqxDataTable's page size is changed.

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowClick Event

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowDoubleClick Event

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowSelect Event

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowUnselect Event

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowBeginEdit Event

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowEndEdit Event

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowExpand Event

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

rowCollapse Event

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxDataTable.

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

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

Methods

NameReturn TypeArguments
addRow Void rowIndex: Number,
rowData: Any,
rowPosition: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.addRow(10,{},'first');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

addFilter Void dataField: String,
filerGroup: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.addFilter('firstName',new jqx.filtergroup());
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

applyFilters Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.applyFilters();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

beginUpdate Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.beginUpdate();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

beginRowEdit Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.beginRowEdit(10);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

beginCellEdit Void rowIndex: Number,
dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.beginCellEdit(10,'firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

clearSelection Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.clearSelection();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

clearFilters Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.clearFilters();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

clear Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.clear();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

destroy Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.destroy();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

deleteRow Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.deleteRow(0);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

endUpdate Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.endUpdate();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

ensureRowVisible Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.ensureRowVisible(10);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

endRowEdit Void rowIndex: Number,
cancelChanges: Boolean
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.endRowEdit(10,true);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

endCellEdit Void rowIndex: Number,
dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.endCellEdit(10,'firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

exportData Any exportDataType: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.exportData('xls');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

focus Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.focus();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

getColumnProperty Any dataField: String,
propertyName: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.getColumnProperty('firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

goToPage Void pageIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.goToPage(10);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

goToPrevPage Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.goToPrevPage();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

goToNextPage Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.goToNextPage();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

getSelection Array<Any> None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.getSelection();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

getRows Array<Any> None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.getRows();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

getView Array<Any> None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.getView();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

getCellValue Any rowIndex: Number,
dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.getCellValue(1,'firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

hideColumn Void dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.hideColumn('firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

hideDetails Void rowIndex: Boolean
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.hideDetails(1);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

isBindingCompleted Boolean None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.isBindingCompleted();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

lockRow Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.lockRow(10);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

refresh Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.refresh();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

render Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.render();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

removeFilter Void dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.removeFilter(firstName);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

scrollOffset Any top: Number,
left: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.scrollOffset(10,0);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

setColumnProperty Void dataField: String,
propertyName: String,
propertyValue: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.setColumnProperty('firstName','text','New Text');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

showColumn Void dataField: String
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.showColumn('firstName');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

selectRow Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.selectRow(1);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

showDetails Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.showDetails(1);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

setCellValue Void rowIndex: Number,
dataField: String,
value: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.setCellValue(1,'firstName','New Value');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

sortBy Void dataField: String,
sortOrder: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.sortBy('firstNmae','asc');
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

updating Boolean None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
let value = this.myDataTable.updating();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

updateBoundData Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.updateBoundData();
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

unselectRow Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.unselectRow(1);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

updateRow Void rowIndex: Number,
rowData: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.updateRow(1,{});
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}

unlockRow Void rowIndex: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxDataTable #myDataTable
[source]="dataAdapter" [columns]="columns" [width]="850">
</jqxDataTable>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myDataTable') myDataTable: jqxDataTableComponent;
ngAfterViewInit(): void
{
this.myDataTable.unlockRow(1);
}

source: any =
{
dataType: 'jsonp',
dataFields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: 'http://api.geonames.org/searchJSON'
};
dataAdapter: any = new jqx.dataAdapter(this.source,
{
formatData: function (data: any): any {
data.featureClass = 'P';
data.style = 'full';
data.username = 'jqwidgets';
data.maxRows = 50;
return data;
}
}
);
columns: any[] =
[
{ text: 'Country Name', dataField: 'countryName', width: 200 },
{ text: 'City', dataField: 'name', width: 250 },
{ text: 'Population', dataField: 'population', cellsFormat: 'f', width: 250 },
{ text: 'Continent Code', dataField: 'continentCode' }
];
}