ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate}
splitterSettings={splitterSettings}
taskFields={taskFields} height='550px'
projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings}
- timelineTemplate={timelineTemplate} labelSettings={labelSettings} treeColumnIndex={1}>
+ labelSettings={labelSettings} treeColumnIndex={1}>
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+ function onCreated() {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+ function onCreated() {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+ function onCreated() {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+ (null);
+ const uploaderRef = React.useRef(null);
+ const asyncSettings = {
+ saveUrl:
+ 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
+ removeUrl:
+ 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
+ };
+ const allowedExtensions: string = '.xlsx, .xls, .csv';
+ const buttons = { browse: 'Choose file' },
+ const onSuccess = (args) => {
+ if (args.operation == 'upload')
+ spreadsheetRef.current.open({ file: args.file.rawFile });
+ };
+ const createOptions = () => {
+ const options: SerializationOptions = {};
+ options.ignoreStyle = (document.getElementById('style') as HTMLInputElement).checked;
+ options.ignoreFormula = (document.getElementById('formula') as HTMLInputElement).checked;
+ options.ignoreFormat = (document.getElementById('format') as HTMLInputElement).checked;
+ options.ignoreConditionalFormat = (document.getElementById('cf') as HTMLInputElement).checked;
+ options.ignoreValidation = (document.getElementById('dv') as HTMLInputElement).checked;
+ options.ignoreFreezePane = (document.getElementById('freeze') as HTMLInputElement).checked;
+ options.ignoreWrap = (document.getElementById('wrap') as HTMLInputElement).checked;
+ options.ignoreChart = (document.getElementById('chart') as HTMLInputElement).checked;
+ options.ignoreImage = (document.getElementById('image') as HTMLInputElement).checked;
+ options.ignoreNote = (document.getElementById('note') as HTMLInputElement).checked;
+ }
+
+ const toggleCheckboxes = () => {
+ let valueOnlyCheckbox: HTMLInputElement = document.getElementById('valueOnly') as HTMLInputElement;
+ let checkboxes: NodeListOf = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
+ checkboxes.forEach(checkbox => {
+ (checkbox as HTMLInputElement).disabled = valueOnlyCheckbox.checked;
+ if (valueOnlyCheckbox.checked) {
+ (checkbox as HTMLInputElement).checked = false;
+ }
+ });
+ }
+
+ const beforeOpen = (args: BeforeOpenEventArgs) => {
+ args.cancel = true;
+ let valueOnlyCheckbox: boolean = (document.getElementById("valueOnly") as HTMLInputElement).checked;
+ let options: SerializationOptions = valueOnlyCheckbox ? { onlyValues: true } : createOptions;
+ fetch(
+ 'https://services.syncfusion.com/react/production/api/spreadsheet/open',
+ args.requestData
+ ).then((response) => {
+ response.json().then((data) => {
+ spreadsheetRef.current.openFromJson({ file: data }, options)
+ });
+ });
+ }
+
+ return ();
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+ function onCreated() {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
+ Make Row 2 readOnly
+ Make Column A readOnly
+ Make E5 cell readOnly
+ Remove readOnly
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+ const readOnlyRow = (): void => {
+ let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+ spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex);
+ }
+ const readOnlyCol = (): void => {
+ let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+ spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex);
+ }
+ const readOnlyCell = (): void => {
+ let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+ spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex);
+ }
+ const removeReadOnly = (): void => {
+ let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+ spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex);
+ spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex);
+ spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex);
+
+ }
+ return (
+
+ Make Row 2 readOnly
+ Make Column A readOnly
+ Make E5 cell readOnly
+ Remove readOnly
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+ (null);
+
+ const createOptions = () => {
+ const options: SerializationOptions = {};
+ options.ignoreStyle = (document.getElementById('style') as HTMLInputElement).checked;
+ options.ignoreFormula = (document.getElementById('formula') as HTMLInputElement).checked;
+ options.ignoreFormat = (document.getElementById('format') as HTMLInputElement).checked;
+ options.ignoreConditionalFormat = (document.getElementById('cf') as HTMLInputElement).checked;
+ options.ignoreValidation = (document.getElementById('dv') as HTMLInputElement).checked;
+ options.ignoreFreezePane = (document.getElementById('freeze') as HTMLInputElement).checked;
+ options.ignoreWrap = (document.getElementById('wrap') as HTMLInputElement).checked;
+ options.ignoreChart = (document.getElementById('chart') as HTMLInputElement).checked;
+ options.ignoreImage = (document.getElementById('image') as HTMLInputElement).checked;
+ options.ignoreNote = (document.getElementById('note') as HTMLInputElement).checked;
+ }
+
+ const toggleCheckboxes = () => {
+ let valueOnlyCheckbox: HTMLInputElement = document.getElementById('valueOnly') as HTMLInputElement;
+ let checkboxes: NodeListOf = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
+ checkboxes.forEach(checkbox => {
+ (checkbox as HTMLInputElement).disabled = valueOnlyCheckbox.checked;
+ if (valueOnlyCheckbox.checked) {
+ (checkbox as HTMLInputElement).checked = false;
+ }
+ });
+ }
+
+ const saveFile = () => {
+ let valueOnlyCheckbox: boolean = (document.getElementById("valueOnly") as HTMLInputElement).checked;
+ let options: SerializationOptions = valueOnlyCheckbox ? { onlyValues: true } : createOptions;
+ spreadsheetRef.current.saveAsJson(options).then((response) => {
+ var formData = new FormData();
+ formData.append(
+ 'JSONData',
+ JSON.stringify(response.jsonObject.Workbook)
+ );
+ formData.append('fileName', 'Sample');
+ formData.append('saveType', 'Xlsx');
+ formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
+ fetch(
+ 'https://services.syncfusion.com/react/production/api/spreadsheet/save',
+ {
+ method: 'POST',
+ body: formData,
+ }
+ ).then((response) => {
+ response.blob().then((data) => {
+ let anchor = createElement('a', {
+ attrs: { download: 'Sample.xlsx' },
+ });
+ let url = URL.createObjectURL(data);
+ anchor.href = url;
+ document.body.appendChild(anchor);
+ anchor.click();
+ URL.revokeObjectURL(url);
+ document.body.removeChild(anchor);
+ });
+ });
+ });
+ }
+
+ return ();
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(Syncfusion React Spreadsheet
+
```
+The following example demonstrates how to make rows, columns, and cells read-only without protecting the sheet:
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/readonly-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/readonly-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/readonly-cs1" %}
+
## Protect Workbook
Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#password) property to protect workbook with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#isprotected) property to protect or unprotect the workbook without the password.