Sets the Grid's adaptivity mode.

The expected object has the following fields:

Enables column reorder.

Enables row reorder.

Enables the fixing of columns.

An object containing settings related to the grid's appearance.

The expected object has the following fields:

The columns property is used to describe all columns displayed in the grid.

Each member of the columns array is an object with the following fields:

Sets the column width.

Describes the column chooser settings.

The expected object has the following fields:

Describes the column menu settings.

The expected object has the following fields:

Describes the settings of the column groups.

Each member of the columnGroups array is an object with the following fields:

Sets the column height.

Possible values: 'none', 'nextColumn', 'currentColumn'.

Sets the column resize mode.

Sets the grid's data source. The value of dataSource can be an Array or an instance of DataAdapter.

Displays loading indicator.

Describes the grid's grouping settings.

The expected object has the following fields:

Sets the messages values.

Callback function called when a cell value has been changed.

Callback function called when the grid has been initialized.

Callback function called when the gird has been rendered.

Callback function called when a row has been initialized.

Callback function called when a row has been inserted.

Callback function called when a row has been removed.

Callback function called when a row has been updated.

Callback function called when a column has been initialized.

Callback function called when a column has been inserted.

Callback function called when a column has been removed.

Callback function called when a column has been updated.

Describes the grid's filtering settings.

The expected object has the following fields:

Describes the grid's editing settings.

The expected object has the following fields:

Sets the placeholder value of the loading indicator.

Possible values: 'bottom', 'center', 'top'.

Sets the placeholder position of the loading indicator.

Describes the paging settings.

The expected object has the following fields:

Describes the pager settings.

The expected object has the following fields:

Sets the grid's placeholder text when there are no rows.

Describes the row details settings.

The expected object has the following fields:

Describes the row adaptive details settings.

The expected object has the following fields:

Sets the minimum row height.

Sets the row height.

Possible values: 'none', 'nextRow', 'currentRow'.

Sets the row resize mode.

Describes the settings for the summary row.

The expected object has the following fields:

Possible values: 'physical', 'virtual', 'infinite', 'deferred'.

Sets the scroll mode settings.

Describes the column header settings.

The expected object has the following fields:

Describes the settings for the group header.

The expected object has the following fields:

Describes the header settings of the grid.

The expected object has the following fields:

Describes the footer settings of the grid.

The expected object has the following fields:

Describes the checkbox selection settings.

The expected object has the following fields:

Describes sorting settings.

The expected object has the following fields:

The event is raised when the user clicks on the header of a column.

Code example

Bind to the columnClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnClick', function (event) {
    // event handling code goes here.
}

The event is raised when the user double clicks on the header of a column.

Code example

Bind to the columnDoubleClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDoubleClick', function (event) {
    // event handling code goes here.
}

The event is raised when the user clicks on a row of the grid.

Code example

Bind to the rowClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowClick', function (event) {
    // event handling code goes here.
}

The event is raised when the user double clicks on a row of the grid.

Code example

Bind to the rowDoubleClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDoubleClick', function (event) {
    // event handling code goes here.
}

The event is raised when the user clicks on a cell of the grid.

Code example

Bind to the cellClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellClick', function (event) {
    // event handling code goes here.
}

The event is raised when the user double clicks on a cell of the grid.

Code example

Bind to the cellDoubleClick event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellDoubleClick', function (event) {
    // event handling code goes here.
}

The mobile event is raised when the users taps on a row of the grid.

Code example

Bind to the rowTap event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowTap', function (event) {
    // event handling code goes here.
}

The mobile event is raised when the users taps on a cell of the grid.

Code example

Bind to the cellTap event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellTap', function (event) {
    // event handling code goes here.
}

The event is raised when the user changes the pages.

Code example

Bind to the page event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('page', function (event) {
    // event handling code goes here.
}

The event is raised when the user reaches the bottom of the grid.

Code example

Bind to the scrollBottomReached event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollBottomReached', function (event) {
    // event handling code goes here.
}

The event is raised when the user reaches the top of the grid.

Code example

Bind to the scrollTopReached event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollTopReached', function (event) {
    // event handling code goes here.
}

Clears the selection that user have made.

Code example

Invoke the clearSelection method.

const grid = document.querySelector('smart-grid');
grid.clearSelection();

Returns the boolean result for the visibility of the row, passed as parameter.

Code example

Invoke the ensureVisible method.

const grid = document.querySelector('smart-grid');
const result = grid.ensureVisible('rowName');

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.

Code example

Invoke the beginUpdate method.

const grid = document.querySelector('smart-grid');
grid.beginUpdate();

Ends the update operation.

Code example

Invoke the endUpdate method.

const grid = document.querySelector('smart-grid');
grid.endUpdate(true);

Disables the grid layout refreshing.

Code example

Invoke the suspendLayout method.

const grid = document.querySelector('smart-grid');
grid.suspendLayout();

Enables the grid layout refreshing.

Code example

Invoke the resumeLayout method.

const grid = document.querySelector('smart-grid');
grid.resumeLayout(true);

Rerenders the grid contents.

Code example

Invoke the render method.

const grid = document.querySelector('smart-grid');
grid.render();

Clears the user selection and empties the data source.

Code example

Invoke the clearRows method.

const grid = document.querySelector('smart-grid');
grid.clearRows();

Refreshes the grid with the default settings.

Code example

Invoke the refresh method.

const grid = document.querySelector('smart-grid');
grid.refresh();