setRange()

pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

sets the selection range

Usage

setRange(
    range: {
        xStart?: string | number;
        xEnd?: string | number;
        yStart?: string | number;
        yEnd?: string | number;
    },
    join?: boolean
): boolean;

Parameters:

range	(object) an object with the range coordinates that contains the following options: xStart - (string | number) the starting column id xEnd - (string | number) the ending column id yStart - (string | number) the starting row id yEnd - (string | number) the ending row id
join	(boolean) defines whether a new range is merged with the current one: if join: true is set, the method merges the new range with the current one. In this case, you can specify just the ending ids of the range, while the starting ids are optional if the join: false setting is specified, the method resets the previous range

note

If not all coordinates are provided, the missing ones are automatically filled (e.g., the last visible column for xEnd). The starting id for at least one coordinate is required.

Returns:

true - on success, false - on error, event cancellation, or if the module is disabled.

Example

// this example shows setting of a range with omitted ending coordinates
const grid = new dhx.Grid("grid_container", {
    // other configuration
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    rangeSelection: true
});

grid.range.setRange({ xStart: "a", yStart: "1" }); // sets range from "a1" to the end
console.log(grid.range.getRange()); // -> { xStart: "a", xEnd: "b", yStart: "1", yEnd: "2" }

// this example demonstrates merging of a range
const grid = new dhx.Grid("grid_container", {
    // other configuration
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    rangeSelection: true
});

grid.range.setRange({ xStart: "a", yStart: "1" });
grid.range.setRange({ xEnd: "b", yEnd: "2" }, true); // merges with the current range
console.log(grid.range.getRange()); // -> { xStart: "a", xEnd: "b", yStart: "1", yEnd: "2" }

Related article: Work with Range Selection object

Related API: getRange(), resetRange()

Related sample: Grid. BlockSelection in the "range" mode. Selection with restricted columns

Change log:

added in v9.2