Determines the Data Grid's Columns.

Code examples

Set the columns property.

 <jqx-grid columns='["ID", "Country"]'></jqx-grid>

Set the columns property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.columns = ["Area", "GDP_Total"];

Get the columns property.

 const grid = document.querySelector('jqx-grid');

 let columns = grid.columns;

Properties

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].allowSort = false;

 const grid = document.querySelector('jqx-grid');

 let allowSort = grid.columns[0].allowSort;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].align = 'center';

 const grid = document.querySelector('jqx-grid');

 let align = grid.columns[0].align;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].cellsAlign = 'center';

 const grid = document.querySelector('jqx-grid');

 let cellsAlign = grid.columns[0].cellsAlign;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].label = 'Country';

 const grid = document.querySelector('jqx-grid');

 let label = grid.columns[0].label;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].dataField = 'countryID';

 const grid = document.querySelector('jqx-grid');

 let dataField = grid.columns[0].dataField;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].dataType = 'boolean';

 const grid = document.querySelector('jqx-grid');

 let dataType = grid.columns[0].dataType;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].displayField = 'country';

 const grid = document.querySelector('jqx-grid');

 let displayField = grid.columns[0].displayField;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].sortOrder = 'desc';

 const grid = document.querySelector('jqx-grid');

 let sortOrder = grid.columns[0].sortOrder;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].sortIndex = 1;

 const grid = document.querySelector('jqx-grid');

 let sortIndex = grid.columns[0].sortIndex;

 const grid = document.querySelector('jqx-grid');

 grid.columns[0].visible = false;

 const grid = document.querySelector('jqx-grid');

 let visible = grid.columns[0].visible;

Determines the Data Grid's Columns Groups(Band Columns)

Code examples

Set the columnGroups property.

 <jqx-grid column-groups='"{ label: "Name", name: "Name" }, { label: "Totals", name: "Totals" }"'></jqx-grid>

Set the columnGroups property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.columnGroups = undefined;

Get the columnGroups property.

 const grid = document.querySelector('jqx-grid');

 let columnGroups = grid.columnGroups;

Determines the data source that will be loaded to the ListBox.

Code examples

Set the dataSource property.

 <jqx-grid data-source='["item 1", "item 2"]'></jqx-grid>

Set the dataSource property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 const grid = document.querySelector('jqx-grid');

 let dataSource = grid.dataSource;

Enables or disables the data grid.

Code examples

Set the disabled property.

 <jqx-grid disabled></jqx-grid>

Set the disabled property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.disabled = false;

Get the disabled property.

 const grid = document.querySelector('jqx-grid');

 let disabled = grid.disabled;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 <jqx-grid messages='{ "de": { "missingReference": "{{elementType}}: Fehlende Bezugnahme auf {{files}}.", "overridingProperties": "{{elementType}}: �bergeordnete Eigenschaften {{property1}} und {{property2}} wurden angewendet. {{property1}} angewendet wird." } }'></jqx-grid>

Set the messages property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.messages = { "de": { "missingReference": "{{elementType}}: Fehlende Bezugnahme auf {{files}}.", "overridingProperties": "{{elementType}}: �bergeordnete Eigenschaften {{property1}} und {{property2}} wurden angewendet. {{property1}} angewendet wird." } };

Get the messages property.

 const grid = document.querySelector('jqx-grid');

 let messages = grid.messages;

Determines the widget's place holder, displayed when the widget is empty.

Code examples

Set the placeholder property.

 <jqx-grid placeholder='Placeholder'></jqx-grid>

Set the placeholder property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.placeholder = 'New Placeholder';

Get the placeholder property.

 const grid = document.querySelector('jqx-grid');

 let placeholder = grid.placeholder;

Determines the Grid's sort mode. Possible values: 'none', 'one', 'many'.

Code examples

Set the sortMode property.

 <jqx-grid sort-mode='one'></jqx-grid>

Set the sortMode property by using the HTML Element's instance.

 const grid = document.querySelector('jqx-grid');

 grid.sortMode = 'many';

Get the sortMode property.

 const grid = document.querySelector('jqx-grid');

 let sortMode = grid.sortMode;

This event is triggered when the element is resized.

Code examples

Bind to the resize event by type: jqxGrid

 const grid = document.querySelector('jqx-grid'); 

 grid.addEventListener('resize', function (event) {
     // event handling code goes here.
 }
 

Sorts the DataGrid.

Code examples

Invoke the sortBy method.

 const grid = document.querySelector('jqx-grid'); 

 grid.sortBy('Country');