Spell Checker in spreadsheet

Question

I want to add spell checker function function to the spreadsheet component from syncfusion. In the documentation that the Document Editor supports performing spell checking for any input text but no mention of the spreadsheet compenent. Here is my react component:import React, { useEffect, useRef, useState } from "react";import { SpreadsheetComponent, SheetDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective,} from "@syncfusion/ej2-react-spreadsheet";import Dropdown from "../components/Dropdown";import { rangeData } from "./data";import "../index.css";import { updateBreakDownItem } from "../api/breakdown-item";function Gc3() { const [defaultData, setDefaultData] = useState(); const spreadsheetRef = useRef(null); const [ModelInputValue, setModalInputValue] = useState({ divisionName: "", divisionNumber: "", }); const [divisions, setDivisions] = useState([]); const [isOpen, setIsOpen] = useState(false); const [divisionId, setDivisionId] = useState(""); const [rowIdToBreakdownItemIdMap, setRowIdToBreakdownItemIdMap] = useState(); const handleDeleteDivision = async (divId) => { }; const addBidderColumn = () => { } const addRow = () => { } const saveData = () => { console.log(JSON.stringify(defaultData)); } useEffect(() => { let spreadsheet = spreadsheetRef.current; if (spreadsheet) { spreadsheet.cellFormat({ border: "2px solid black" }, "A1:T200"); spreadsheet.numberFormat('$#,##0.00', 'D4:Z900'); } }, []); useEffect(() => { const helperFunc = async () => { const { data, rowIdToBreakdownItemIdMap, bidderNameToIdMap } = await rangeData(); setDefaultData(data); setRowIdToBreakdownItemIdMap(rowIdToBreakdownItemIdMap); console.log(bidderNameToIdMap); }; helperFunc(); }, []); const onCreated = {} async function dataSourceChanged(args) { switch (args.action) { case 'edit': const rowId = args.data[0]["Row Id"] setDefaultData(prev => prev.map((data) => { if (data["Row Id"] && data["Row Id"] == rowId) { let newRow = {} if (rowId > 5) { if (typeof args.data[0]["Unit Price"] == 'string' && args.data[0]["Unit Price"].includes("$")) { newRow = { ...args.data[0], Total: parseFloat(args.data[0]["Qty"]) * parseFloat(args.data[0]["Unit Price"].replace('$', '')) } } else { newRow = { ...args.data[0], Total: parseFloat(args.data[0]["Qty"]) * parseFloat(args.data[0]["Unit Price"]) } } } else { newRow = { ...args.data[0] } } return newRow } else { return data } })) if (rowId < 4) { console.log(args.data); } else if (rowId > 5) { const updatedItemId = rowIdToBreakdownItemIdMap[rowId] let dataToUpdate; if (typeof args.data[0]["Unit Price"] == 'string' && args.data[0]["Unit Price"].includes("$")) { dataToUpdate = { "BreakdownItemName": args.data[0]["ItemBreakdown"], "BreakdownItemQuantity": parseFloat(args.data[0]["Qty"]), "BreakdownItemPerUnit": parseFloat(args.data[0]["Unit Price"].replace('$', '')), "BreakdownItemArea": args.data[0]["Area"], }; } else { dataToUpdate = { "BreakdownItemName": args.data[0]["ItemBreakdown"], "BreakdownItemQuantity": parseFloat(args.data[0]["Qty"]), "BreakdownItemPerUnit": parseFloat(args.data[0]["Unit Price"]), "BreakdownItemArea": args.data[0]["Area"], }; } await updateBreakDownItem(updatedItemId, dataToUpdate); } break; case 'add': console.log('Added Data: ' + JSON.stringify(args.data)); break; case 'delete': console.log('Deleted Data: ' + JSON.stringify(args.data)); break; } } if (!defaultData) { return

Loading...

} return ( <>

Add Division

{Array.from({ length: 15 }).map((_, i) => ( ))} );}export default Gc3;I'll be looking for your response, thanks.

Babu Periyasamy · Answer

Hi Muhammad Salman Sarwar,Currently, we are validating your reported query with the provided details. We will update you with further details soon.

Muhammad Salman Sarwar · Answer

Thanks, I'll be waiting for your update

Babu Periyasamy · Answer

Hi Muhammad Salman Sarwar,We have checked your reported query about Spell checker in Spreadsheet. Currently, we don’t have support for Spell Checker in our Spreadsheet component. However, we have tried to provide a work around solution to use Spell checker in our Spreadsheet component. And we have attached the tried workaround solution with code snippet and sample below for your reference.Code snippet: const spellCheck = () => { //External dictionary used for Spell check and suggestions. const dictionary = new Typo('en_US'); const range = spreadsheet.getActiveSheet().selectedRange; //Get the row and column indexes of the selected range. const rangeIndexes = getRangeIndexes(range); let cellValue; let words = []; for (let i = rangeIndexes[0]; i <= rangeIndexes[2]; i++) { for (let j = rangeIndexes[1]; j <= rangeIndexes[3]; j++) { let cell = getCell(i, j, spreadsheet.getActiveSheet()); //Get the address of the cell. let cellAddress = getCellAddress(i,j); cellValue = cell ? (cell.value ? cell.value : '') : ''; cellValue = cellValue.split(' '); for (let k = 0; k < cellValue.length; k++) { //Store the index of the word in a cell. let valueIndex = k; words.push({"value": cellValue[k], "address": cellAddress, "index": valueIndex}); } } } // Array to store misspelled words. let misspelledWords = []; // Check each word for spelling errors. words.forEach(word => { if (!dictionary.check(word.value)) { //Get the suggestions for the misspelled words. const suggestions = dictionary.suggest(word.value); misspelledWords.push({ word, suggestions }); } }); if (misspelledWords.length > 0) { misspelledWords.forEach(misspelledWord => { //Log the mispelled words with its cell address, index of the value and suggestions. console.log(misspelledWord); }); } else { console.log("No misspelled words found!!") } } Stackblitz sample: https://stackblitz.com/edit/react-dtfrus-yfkemn?file=index.jsIn the above sample, we have done the spell check for the selectedRange of the Spreadsheet on a button click. In a button click, we have used the Typo.js library (External library) to check the value of the selected range and to show the suggestions for the value inside the cell. And finally, we have logged the misspelled value along with its cell address and index of the word within the cell. Based on the returned values, you can update the cell value of the using the updateCell method of our Spreadsheet component.And we have confirmed Spell Checker in Spreadsheet component as an improvement and already logged it as a feature. It will be available in any of our upcoming releases. You can communicate and track the status of the feature using the below link from our feedback portal.Feedback link for tracking purposes: https://www.syncfusion.com/feedback/46546/provide-spell-check-support-to-spreadsheet-componentUnfortunately, we are unable to implement this feature immediately. Since we have some more bug fixes and features that are prior than this feature is in queue scheduled for upcoming releases, we can’t commit this feature at present. We usually have an interval of at least three months between the releases.At the planning stage for every release cycle, we review all the open features once again and finalize features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. Once we have anything definite to share about these features implementation, we will move the feedback to scheduled status with the tentative release timeline. We appreciate your patience until then.