Integrated latest changes at 07-01-2024 4:30:12 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -2415,15 +2415,9 @@
 <li><a href="/ej2-react/spreadsheet/template">Templates</a></li>
 <li>How To
 <ul>
-<li><a href="/ej2-react/spreadsheet/how-to/sort-a-range-by-custom-list">Sort a range by custom list</a></li>
-<li><a href="/ej2-react/spreadsheet/how-to/print">Print the single/multiple sheets</a></li>
 <li><a href="/ej2-react/spreadsheet/how-to/create-a-object-structure">Create a object structure </a></li>
 <li><a href="/ej2-react/spreadsheet/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 <li><a href="/ej2-react/spreadsheet/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
-<li><a href="/ej2-react/spreadsheet/how-to/import-an-excel-document-using-file-uploader">Import an excel document using file uploader</a></li>
-<li><a href="/ej2-react/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string">Save and open Spreadsheet data as Base64 string</a></li>
-<li><a href="/ej2-react/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet">Insert a sheet programmatically and make it the active sheet</a></li>
-<li><a href="/ej2-react/spreadsheet/how-to/get-filtered-rows">Get filtered rows</a></li>
 </ul>
 </li>
 <li><a href="/ej2-react/spreadsheet/mobile-responsiveness">Mobile Responsiveness</a></li>

ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.jsx

@@ -1,7 +1,7 @@
 {% raw %}
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
 import { data } from './datasource';
 function App() {
   const spreadsheetRef = React.useRef(null);

ej2-react/installation/mac-installer/images/Mac_Download.PNG

@@ -85,6 +85,29 @@ When you want to reapply the filter after some changes happened in the rows. It
 The following errors have been handled for filtering,
 * *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No filter will be performed if the range is invalid.
 
+## Get the filtered rows
+
+Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object.
+
+The following code example shows how to get the filtered rows.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/filter-cs2/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/filter-cs2/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/filter-cs2/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/filter-cs2/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/filter-cs2" %}
+
 ## Limitations
 
 The following features have some limitations in Filter:

ej2-react/installation/mac-installer/images/start-trial-download-offline-installer.png

@@ -99,4 +99,5 @@ The notes can be added initially when the Spreadsheet loads using cell data bind
 
 * When importing the document with notes, the formatting of the content in the notes will not be available. Similarly, while adding notes, we cannot apply formatting to them.
 * The style and appearance of the dialog box for the notes, including size, color, border, and other elements, cannot be directly changed.
-* Exporting the workbook along with notes is not supported in file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf).
+* Exporting the workbook along with notes is not supported in file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf).
+* Notes added outside the used ranges of the worksheet will not be included in the exported document.

ej2-react/installation/mac-installer/images/trial-confirmation.png

@@ -93,6 +93,23 @@ You can open excel file into a read-only mode by using the [`openComplete`](http
 
  {% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs4" %}
 
+### Import an excel document using file uploader
+
+If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/react/documentation/api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/react/documentation//api/spreadsheet/#open) method to see the appropriate output.
+
+The following code example shows how to import an excel document using file uploader in spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/open-save-cs9/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/open-save-cs9/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs9" %}
+
 ### Configure JSON deserialization options
 
 Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](../api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
@@ -130,6 +147,23 @@ The following code snippet demonstrates how to configure the deserialization opt
 
 {% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-json" %}
 
+### To Open Spreadsheet data as a Base64 string
+
+In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](../api/spreadsheet/#open) method in the spreadsheet.
+
+The following code example shows how to open the spreadsheet data as base64 string.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/base-64-string/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/base-64-string/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+
 ### External workbook confirmation dialog
 
 When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data.
@@ -316,6 +350,25 @@ The following code snippet demonstrates how to configure the serialization optio
 
 {% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-json" %}
 
+### To Save Spreadsheet data as a Base64 string
+
+In the Spreadsheet component, there is currently no direct option to save and open data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`.
+
+> You can get the Spreadsheet data as blob in the [saveComplete](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#savecomplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforesave) event.
+
+The following code example shows how to save the spreadsheet data as base64 string.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/base-64-string/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/base-64-string/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+
 ### Supported file formats
 
 The following list of Excel file formats are supported in Spreadsheet:

ej2-react/installation/offline-installer/images/offline1.png

@@ -141,7 +141,30 @@ By customizing sort comparer, you can define the sort action as desired.
 
 > * The `sortComparer` is an optional property of `sortDescriptor`.
 
-For custom sort comparer example, refer to the [`Sort a range by custom list`](./how-to/sort-a-range-by-custom-list) in the `how-to` section.
+For custom sort comparer example, refer to the [`Sort a range by custom list`] below.
+
+### Sort a range by using custom list
+
+You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`.
+
+In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/custom-sort-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/custom-sort-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/custom-sort-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/custom-sort-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/spreadsheet/custom-sort-cs1" %}
 
 ## Known error validations