This example demonstrates configuring the module with the handle disabled and the "range" mode enabled:
const grid = new dhx.Grid("grid_container", {
columns: [
{ id: "a", header: [{ text: "A" }] },
{ id: "b", header: [{ text: "B" }] },
],
data: [
{ id: "1", a: "A1", b: "B1" },
{ id: "2", a: "A2", b: "B2" },
],
blockSelection: {
mode: "range",
handle: false
}
});
const columns = [
{ id: "productId", header: [{ text: "Product ID" }] },
{ id: "productName", header: [{ text: "Product Name" }] },
{ id: "category", header: [{ text: "Category" }] },
{ id: "receivedDate", header: [{ text: "Received Date" }], type: "date", dateFormat: "%d.%m.%Y" },
{ id: "stock", header: [{ text: "Stock" }], type: "number" },
{ id: "price", header: [{ text: "Price" }], type: "number", numberMask: { prefix: "$" } }
];
const grid = new dhx.Grid("grid_container", {
columns,
data,
autoWidth: true,
history: true,
blockSelection: {
handle: {
allowAxis: "y",
handler: blockSelectionHandler,
},
},
});
grid.range.setRange({
xStart: "productId",
yEnd: grid.data.getId(0),
});
let initValues = {};
let columnIndex = {};
function blockSelectionHandler({ cell, array, index, grid }) {
if (!index) {
initValues = {};
columnIndex = {};
}
const columnId = cell.column.id;
if (!initValues[columnId]) {
initValues[columnId] = cell.row[columnId];
columnIndex[columnId] = 0;
return { prev: initValues[columnId], current: initValues[columnId] };
}
const colIndex = columnIndex[columnId] += 1;
const initValue = initValues[columnId];
let prev = current = cell.row[columnId];
switch (cell.column.type) {
case "number":
current = initValue + colIndex * 10;
break;
case "date":
const [year, month, day] = initValue.split("-");
current = new Date(Number(year), Number(month) - 1, Number(day) + colIndex).toISOString();
break;
default:
current = initValue;
break;
}
if (columnId === "productId") {
current = `P00${parseInt(initValue.replace(/\D/g, "")) + colIndex}`;
}
if (columnId === "category") {
current = `${current} (${colIndex})`;
}
const history = { prev, current };
grid.data.update(cell.row.id, { [columnId]: current },
index < array.length - 1
);
return history;
}
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