Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/grid/usage_selection/ below:

JavaScript Grid - Work with Selection Object

You can manipulate with Grid cells via the API of the selection object. It is possible to get the object of one or more selected cells or rows, to set selection both to a single row or cell and to multiple rows or cells. The selection object also allows removing selection from previously selected cells.

Starting from v7.0, you can activate selection of cells via the enable method of the selection object.

To disable selection of cells in Grid, make use of the disable method of the selection object:

grid.selection.disable();

You can set selection to one or more rows or cells using the setCell() method of the selection object. The method takes the following parameters:

The example below shows how to highlight the first cell in the "Yearly Change" column:

const grid = new dhx.Grid("grid_container", {
    columns: [
        
    ],
    selection:"cell",
    multiselection: false,
    data: dataset
});

const row = grid.data.getItem(grid.data.getId(0));
const column = grid.getColumn("yearlyChange");
grid.selection.setCell(row, column);

Related sample: Grid. Multiselection

note

The multiselection property is disabled.

You can highlight the desired cells when the multiselection:true and the selection:"cell" properties are set:

const grid = new dhx.Grid("grid_container", {
    columns: [
        
    ],
    selection:"cell",
    multiselection: true,
    data: dataset
});

grid.selection.setCell(grid.data.getId(0),"yearlyChange");
grid.selection.setCell(grid.data.getId(1),"netChange", true, false);
grid.selection.setCell(grid.data.getId(3),"netChange", true, false);

Related sample: Grid. Multiselection

It is also possible to select a range of cells at once:

For that, manipulate the ctrlUp and shiftUp parameters accordingly:

grid.selection.setCell(grid.data.getId(1),"yearlyChange");
grid.selection.setCell(grid.data.getId(3),"density", false, true);

Related sample: Grid. Multiselection

note

Use the selection:"rows" property to be able to operate rows.

To make the process of selecting cells more flexible, you can apply the related events of the selection object:

• afterSelect
• beforeSelect

You can check whether a particular cell is selected using the isSelectedCell() method of the selection object. The method takes the following parameters:

const grid = new dhx.Grid("grid_container", {
    columns: [
        
    ],
    selection:"cell",
    multiselection: false, 
    data: dataset
});

const row = grid.data.getItem(grid.data.getId(0));
const column = grid.getColumn("project");
grid.selection.setCell(row,column);

const selectedCell = grid.selection.isSelectedCell(row,column); 
console.log(selectedCell); 

Starting from v7.0, you can remove selection from a selected cell/row or from highlighted cells/rows using the removeCell method of the selection object. The method takes two parameters:

grid.selection.removeCell();
 

grid.selection.removeCell(rowId);
 

grid.selection.removeCell(rowId, colId);

To make the process of unselecting cells more flexible, you can apply the related events of the selection object:

• afterUnSelect
• beforeUnSelect

To get the object of a selected Grid cell, use the getCell() method of the selection object:

const selectedCell = grid.selection.getCell();

To get the object of multiple selected cells, use the getCells() method of the selection object:

const selectedCells = grid.selection.getCells();

0: {row: {…}, column: {…}}
1: {row: {…}, column: {…}}
2: {row: {…}, column: {…}}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4