Integrated latest changes at 07-09-2025 7:30:09 PM

Author: SyncfusionBuild

ej2-react/kanban/nextjs-getting-started.md

@@ -104,7 +104,7 @@ yarn add @syncfusion/ej2-react-kanban
 
 ## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> React components to match the style of your application by referring to one of the built-in themes.
+Syncfusion<sup style="font-size:70%">&reg;</sup> React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme), which are available in the installed packages. It’s easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> React components to match the style of your application by referring to one of the built-in themes.
 
 Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
 
@@ -123,7 +123,7 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
 {% endhighlight %}
 {% endtabs %}
 
-> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section.
+> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) section.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> React component
 
@@ -138,14 +138,15 @@ Follow the below steps to add the React Kanban component to the Next.js project:
 import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
 import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
 function App(this: any) {
+    let cardsettings = { contentField: "Summary", headerField: "Id" }
     let data = new DataManager({
         url: 'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
         adaptor: new ODataAdaptor
     });
     function DialogOpen(args: { cancel: boolean; }) {
         args.cancel = true;
     }
-    return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
+    return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={cardsettings} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
         <ColumnsDirective>
               <ColumnDirective headerText="To Do" keyField="Open"/>
               <ColumnDirective headerText="In Progress" keyField="InProgress"/>

ej2-react/rich-text-editor/tools/text-formatting.md

@@ -440,76 +440,6 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action.
 
  {% previewsample "page.domainurl/code-snippet/rich-text-editor/horizontal-line" %}
 
-## Insert code
-
-The React Rich Text Editor component offers a powerful feature to format text as preformatted code blocks, making it ideal for displaying programming snippets or structured contents.
-
-### Enabling code block formatting
-
-To enable code block formatting, ensure that the Formats item is included in the toolbar items of your Rich Text Editor configuration.
-
-Below are examples and code snippets demonstrating how to add and effectively use the code block formatting option in the Rich Text Editor.
-
-`[Class-component]`
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/rich-text-editor/code-format-cs1/app/App.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/rich-text-editor/code-format-cs1/app/App.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/code-format-cs1" %}
-
-`[Functional-component]`
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/rich-text-editor/code-format-cs2/app/App.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/rich-text-editor/code-format-cs2/app/App.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/code-format-cs2" %}
-
-### Applying code block formatting
-
-Follow these steps to format text as a code block:
-
-1. Select the desired text in the editor.
-2. Click on the `Formats` dropdown in the toolbar.
-3. Choose `Preformatted` from the dropdown menu.
-
-### Exiting code block format
-
-To exit the code block format:
-
-1. Place the cursor at the end of your code block content.
-2. Press the Enter key twice.
-
-This action will move the cursor out of the code block and return to normal text formatting.
-
-### Enhancing code block appearance
-
-To make your code blocks more visually appealing, you can add custom styling. Here's an example of how to style your `<pre>` tag:
-
-```css
-<style>
-
-.e-richtexteditor .e-rte-content .e-content pre{
-    background-color: #f4f4f4; color: #333; font-family: 'Courier New', Courier, monospace; font-size: 14px; padding: 15px; border-radius: 5px; border: 1px solid #ccc; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;
-}
-
-</style>
-
-```
-
-This styling adds a light gray background, sets a monospace font, and includes padding and borders for better visual separation.
-
 ## Format painter
 
 The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/formatPainterSettings/) property.

ej2-react/spreadsheet/open-save.md

@@ -130,7 +130,7 @@ By default, the Spreadsheet component provides an option to browse files from th
 ```js
 
     // Fetch call to server to load the Excel file.
-    fetch('https://localhost:{{Your port number}}/Home/Open', {
+    fetch('https://localhost:{{Your_port_number}}/Home/Open', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -149,7 +149,7 @@ You can find the server endpoint code to fetch and process the Excel file in thi
 
 ```js
 // To open an Excel file from the server.
-fetch('https://localhost:{port number}/Home/Open')
+fetch('https://localhost:{{port_number}}/Home/Open')
 ```
 
 ### Open an excel file using a hosted web service in AWS Lambda
@@ -369,7 +369,7 @@ const App = () => {
     retryAfterDelay: 500
   }
 
-  const openUrl = 'https://localhost:{port number}/Home/Open';
+  const openUrl = 'https://localhost:{{port_number}}/Home/Open';
 
   return (
     <div className='control-section spreadsheet-control'>
@@ -407,7 +407,7 @@ The [attachment](https://www.syncfusion.com/downloads/support/directtrac/general
 
 ```js
     // Specifies the service URL for processing the Excel file, converting it into a format suitable for loading in the spreadsheet.
-    <SpreadsheetComponent ref={spreadsheetRef} openUrl="https://localhost:{port number}/Home/Open">
+    <SpreadsheetComponent ref={spreadsheetRef} openUrl="https://localhost:{{port_number}}/Home/Open">
     </SpreadsheetComponent>
 ```
 
@@ -531,7 +531,7 @@ By default, the Spreadsheet component saves the Excel file and downloads it to t
         formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook));
         formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false }));
         // Using fetch to invoke the save process.
-        fetch('https://localhost:{{Your port number}}/Home/Save', {
+        fetch('https://localhost:{{Your_port_number}}/Home/Save', {
             method: 'POST',
             body: formData
         }).then((response) => {
@@ -579,7 +579,7 @@ You can find the server endpoint code to save the spreadsheet data as an Excel f
 ```js
 
 //To save an Excel file to the server.
-fetch('https://localhost:{port number}/Home/Save')
+fetch('https://localhost:{{port_number}}/Home/Save')
 
 ```