Blazor Grid Paste from Excel
The Ignite UI for Blazor IgbGrid can read Excel data that is copied to the clipboard. In this section we will show you how to do this with some custom code.
Blazor Paste from Excel Example
This sample demonstrates how to implement pasting from Excel into the IgbGrid Material UI table.
To work with the sample open up any Excel spreadsheet, copy some rows, and paste it into the grid using the keyboard (Ctrl + V, Shift + Insert,Command + V).
Na parte superior, há um botão suspenso com 2 opções:
- "Colar dados como novas linhas" – neste modo, todos os dados copiados do Excel serão anexados à grade como novas linhas
- "Colar a partir da célula ativa" – neste modo, os dados na grade serão substituídos.
Os novos dados após a colagem são decorados em itálico.
Usage
Primeiro, você deve associar ao evento da rendered grade para criar e gerenciar um elemento de área de texto:
<IgbGrid AutoGenerate="false" Data="InvoicesData" RenderedScript="WebGridPasteFromExcel" @ref="grid" Id="grid" PrimaryKey="OrderID">
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarExporter ExportExcel="true" ExportCSV="false"> </IgbGridToolbarExporter>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn Field="OrderID" Hidden="true"></IgbColumn>
<IgbColumn Field="Salesperson" Header="Name" Width="200px"></IgbColumn>
<IgbColumn Field="ShipName" Header="Ship Name" Width="200px"></IgbColumn>
<IgbColumn Field="Country" Header="Country" Width="200px"></IgbColumn>
<IgbColumn Field="ShipCity" Header="Ship City" Width="200px"></IgbColumn>
<IgbColumn Field="PostalCode" Header="Postal Code" Width="200px"></IgbColumn>
</IgbGrid>
// In JavaScript
igRegisterScript("WebGridPasteFromExcel", (evtArgs) => {
const grid = document.getElementById("grid");
grid.addEventListener("keydown", onWebGridPasteFromExcelKeyDown);
}, false);
function onWebGridPasteFromExcelKeyDown(eventArgs) {
const ctrl = eventArgs.ctrlKey;
const key = eventArgs.keyCode;
// Ctrl-V || Shift-Ins || Cmd-V
if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) {
textArea.focus();
}
}
var txtArea;
var textArea = getTextArea();
function getTextArea() {
if(!txtArea) {
const div = document.createElement("div");
const divStyle = div.style;
divStyle.position = "fixed";
document.body.appendChild(div);
txtArea = document.createElement("textarea");
const style = txtArea.style;
style.opacity = "0";
style.height = "0px";
style.width = "0px";
style.overflow = "hidden";
div.appendChild(txtArea);
txtArea.addEventListener("paste", (eventArgs) => { onPaste(eventArgs); });
}
return txtArea;
}
O código cria um elemento textarea DOM que é usado para receber os dados colados da área de transferência. Quando os dados são colados na área de texto, o código os analisa em uma matriz.
function onPaste(eventArgs) {
let data;
const clData = "clipboardData";
// get clipboard data - from window.cliboardData for IE or from the original event's arguments.
if (window[clData]) {
window.event.returnValue = false;
data = window[clData].getData("text");
} else {
data = eventArgs[clData].getData("text/plain");
}
// process the clipboard data
const processedData = processData(data);
if (pasteMode === "Paste data as new records") {
addRecords(processedData);
} else {
updateRecords(processedData);
}
}
function processData(data) {
const pasteData = data.split("\n");
for (let i = 0; i < pasteData.length; i++) {
pasteData[i] = pasteData[i].split("\t");
// Check if last row is a dummy row
if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") {
pasteData.pop();
}
// remove empty data
if (pasteData.length === 1 &&
pasteData[0].length === 1 &&
(pasteData[0][0] === "" || pasteData[0][0] === "\r")) {
pasteData.pop();
}
}
return pasteData;
}
Os dados colados podem ser adicionados como novos registros ou usados para atualizar os registros existentes com base na seleção do usuário. Para referência, consulte os métodos addRecords e updateRecords.
function addRecords(processedData) {
const grid = document.getElementById("grid");
const columns = grid.visibleColumns;
const pk = grid.primaryKey;
const addedData = [];
for (const curentDataRow of processedData) {
const rowData = {};
for (const col of columns) {
const index = columns.indexOf(col);
rowData[col.field] = curentDataRow[index];
}
// generate PK
rowData[pk] = grid.data.length + 1;
grid.addRow(rowData);
addedData.push(rowData);
}
// scroll to last added row
grid.navigateTo(grid.data.length - 1, 0, () => {
clearStyles();
for (const data of addedData) {
const row = grid.getRowByKey(data[pk]);
if (row) {
const rowNative = getNative(row);
if (rowNative) {
rowNative.style["font-style"] = "italic";
rowNative.style.color = "gray";
}
}
}
});
}
function updateRecords(processedData) {
const grid = document.getElementById("grid");
const cell = grid.selectedCells[0];
const pk = grid.primaryKey;
if (!cell) { return; }
const rowIndex = cell.row.index;
const columns = grid.visibleColumns;
const cellIndex = grid.visibleColumns.indexOf(cell.column);
let index = 0;
const updatedRecsPK = [];
for (const curentDataRow of processedData) {
const rowData = {};
const dataRec = grid.data[rowIndex + index];
const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1;
rowData[pk] = rowPkValue;
for (let j = 0; j < columns.length; j++) {
let currentCell;
if (j >= cellIndex) {
currentCell = curentDataRow.shift();
}
const colKey = columns[j].field;
rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null);
}
if (!dataRec) {
// no rec to update, add instead
rowData[pk] = rowPkValue;
grid.addRow(rowData);
continue;
}
grid.updateRow(rowData, rowPkValue);
updatedRecsPK.push(rowPkValue);
index++;
}
API References
Additional Resources
- Exportador do Excel- Use o serviço Exportador do Excel para exportar dados do Excel do Grid. Ele também oferece a opção de exportar apenas os dados selecionados da Grade. A funcionalidade de exportação é encapsulada na classe ExcelExporterService e os dados são exportados no formato de tabela do MS Excel. Este formato permite recursos como filtragem, classificação, etc. Para fazer isso, você precisa invocar o método de exportação do ExcelExporterService e passar o componente Grid como primeiro argumento.
Nossa comunidade é ativa e sempre acolhedora para novas ideias.