Pegar cuadrícula Blazor desde Excel

    La Ignite UI for Blazor IgbGrid puede leer datos de Excel que se copian al portapapeles. En esta sección, le mostraremos cómo hacerlo con un código personalizado.

    Blazor Paste from Excel Example

    En este ejemplo se muestra cómo implementar el pegado desde Excel en la tabla de la interfaz de usuario de IgbGrid material. Para trabajar con el ejemplo, abra cualquier hoja de cálculo de Excel, copie algunas filas y péguelas en la cuadrícula con el teclado (Ctrl + V, Shift + Insert, Command + V).

    En la parte superior hay un botón desplegable con 2 opciones:

    1. "Pegar datos como filas nuevas": en este modo, cualquier dato copiado de Excel se agregará a la cuadrícula como filas nuevas.
    2. "Pegar desde la celda activa": en este modo se sobrescribirán los datos de la cuadrícula.

    Los nuevos datos después del pegado están decorados en cursiva.

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Usage

    Primero debe enlazar al evento de la cuadrícula para crear y administrar un elemento de área de rendered 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;
    }
    
    razor

    El código crea un elemento de área de texto DOM que se utiliza para recibir los datos pegados del portapapeles. Cuando los datos se pegan en el área de texto, el código los analiza en una 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;
    }
    razor

    Los datos pegados se pueden agregar como nuevos registros o se pueden usar para actualizar los registros existentes en función de la selección del usuario. Como referencia, consulte los métodos addRecords y 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++;
        }
    razor

    API References

    Additional Resources

    • Exportador de Excel: use el servicio Exportador de Excel para exportar datos a Excel desde la cuadrícula. También ofrece la opción de exportar solo los datos seleccionados de la cuadrícula. La funcionalidad de exportación se encapsula en la clase ExcelExporterService y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, clasificación, etc. Para ello, debe invocar el método de exportación de ExcelExporterService y pasar el componente Grid como primer argumento.

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.