| Name | Type | Default |
|---|---|---|
| altRows | Boolean | false |
|
Sets or gets the 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Code examples
Bind to the
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
}
|
||
| cellBeginEdit | Event | |
|
This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the Code examples
Bind to the
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
}
|
||
| cellEndEdit | Event | |
|
This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the Code examples
Bind to the
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
}
|
||
| cellValueChanged | Event | |
|
This event is triggered when a cell value is changed. Code examples
Bind to the
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
}
|
||
| columnResized | Event | |
|
This event is triggered when a column is resized. Code examples
Bind to the
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
}
|
||
| columnReordered | Event | |
|
This event is triggered when the column's order is changed. Code examples
Bind to the
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
}
|
||
| sort | Event | |
|
This event is triggered when the jqxDataTable sort order or sort column is changed. Code examples
Bind to the
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
}
|
||
| filter | Event | |
|
This event is triggered when the jqxDataTable's rows filter is changed. Code examples
Bind to the
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
}
|
||
| pageChanged | Event | |
|
This is triggered when the jqxDataTable's current page is changed. Code examples
Bind to the
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
}
|
||
| pageSizeChanged | Event | |
|
This is triggered when the jqxDataTable's page size is changed. Code examples
Bind to the
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
}
|
||
| rowClick | Event | |
|
This is triggered when a row is clicked. Code examples
Bind to the
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
}
|
||
| rowDoubleClick | Event | |
|
This is triggered when a row is double-clicked. Code examples
Bind to the
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
}
|
||
| rowSelect | Event | |
|
This is triggered when a row is selected. Code examples
Bind to the
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
}
|
||
| rowUnselect | Event | |
|
This is triggered when a row is unselected. Code examples
Bind to the
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
}
|
||
| rowBeginEdit | Event | |
|
This is triggered when a row edit begins. Code examples
Bind to the
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
}
|
||
| rowEndEdit | Event | |
|
This is triggered when a row edit ends. Code examples
Bind to the
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
}
|
||
| rowExpand | Event | |
|
This is triggered when a row is expanded. Code examples
Bind to the
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
}
|
||
| rowCollapse | Event | |
|
This is triggered when a row is collapsed. Code examples
Bind to the
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
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||