DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -1217,8 +1217,10 @@
          <li>Connecting to Adaptors
           <ul>
             <li><a href="/ej2-react/grid/connecting-to-adaptors/url-adaptor">Url Adaptor</a></li>
+            <li><a href="/ej2-react/grid/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>
             <li><a href="/ej2-react/grid/connecting-to-adaptors/webapi-adaptor">Web API Adaptor</a></li>
             <li><a href="/ej2-react/grid/connecting-to-adaptors/graphql-adaptor">GraphQL Adaptor</a></li>
+            <li><a href="/ej2-react/grid/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>
           </ul>
         </li>
          <li><a href="/ej2-react/grid/adaptive">Adaptive View</a></li>

ej2-react/grid/connecting-to-adaptors/url-adaptor.md

@@ -137,9 +137,9 @@ namespace UrlAdaptor.Server.Controllers
 
 **4. Run the Application:**
 
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**. 
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**. 
 
-After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xx/api/Grid). Here **xx** denotes the port number.
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Grid). Here **xxxx** denotes the port number.
 
 ![UrlAdaptor-data](../images/url-adaptor-data.jpeg)
 
@@ -178,7 +178,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
 
 **Step 4: Adding Syncfusion component**
 
-In your component file (e.g., App.ts), import `DataManager` and `UrlAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xx/api/Grid) using the `url` property and set the adaptor `UrlAdaptor`.
+In your component file (e.g., App.ts), import `DataManager` and `UrlAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/api/Grid) using the `url` property and set the adaptor `UrlAdaptor`.
 
 {% tabs %}
 {% highlight ts tabtitle="App.tsx" %}
@@ -206,9 +206,9 @@ export default App;
 {% endhighlight %}
 {% endtabs %}
 
-> Replace https://localhost:****/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
+> Replace https://localhost:xxxx/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
 
-Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xx.
+Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xxxx.
 
 > Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
 

ej2-react/grid/connecting-to-adaptors/webapi-adaptor.md

@@ -124,9 +124,9 @@ namespace WebApiAdaptor.Server.Controllers
 
 **4. Run the Application:**
 
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**. 
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**. 
 
-After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xx/api/Orders). Here **xx** denotes the port number.
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Orders). Here **xxxx** denotes the port number.
 
 ![WebApiAdaptor-data](../images/webapi-adaptor-data.png)
 
@@ -165,7 +165,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
 
 **Step 3: Adding Syncfusion component**
 
-In your component file (e.g., App.ts), import `DataManager` and `WebApiAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xx/api/Orders) using the `url` property and set the adaptor `WebApiAdaptor`.
+In your component file (e.g., App.ts), import `DataManager` and `WebApiAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance specifying the URL of your API endpoint(https:localhost:xxxx/api/Orders) using the `url` property and set the adaptor `WebApiAdaptor`.
 
 {% tabs %}
 {% highlight ts tabtitle="App.tsx" %}
@@ -190,8 +190,8 @@ export default App;
 {% endhighlight %}
 {% endtabs %}
 
-> Replace https://localhost:xx/api/Orders with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON).
-Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
+> Replace https://localhost:xxxx/api/Orders with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON).
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
 
 > Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
 

ej2-react/grid/context-menu.md

@@ -80,14 +80,12 @@ The following example demonstrates how to enable context menu feature in the gri
 ## Custom context menu items
 
 The Syncfusion React Grid empowers you to enhance your user experience by incorporating custom context menu items into the default context menu. These customized options enable you to tailor the context menu to meet the unique requirements of your application.
-
-By adding custom context menu items, you can introduce additional actions or operations that are directly relevant to your specific use case. This flexibility allows you to create a highly personalized and efficient interaction with your grid, making it a powerful tool for data management and manipulation.
-
-To add custom context menu items by defining the [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuitems) property as a collection of [contextMenuItemModel](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel). You can also define actions for these customized items using the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event.
-
+
 To incorporate custom context menu items in the Syncfusion React Grid, you can achieve this by specifying the [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuitems) property as a collection of [contextMenuItemModel](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel). This allows you to define and customize the appearance and behavior of these additional context menu items according to your requirements.
-
-Furthermore, you can assign actions to these custom items by utilizing the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked. 
+
+Furthermore, you can assign actions to these custom items by utilizing the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/grid/#contextmenuclick) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked.
+
+The following example demonstrates how to add custom context menu items in the Grid component.
 
 The following example demonstrates how to add custom context menu items in the Grid component.
 
@@ -114,7 +112,7 @@ The Syncfusion React Grid provides the ability to show the context menu items on
 
 This can be achieved by using the [created](https://ej2.syncfusion.com/react/documentation/api/grid/#created) event and the context menu's `beforeOpen` event of the Grid.
 
-By using the `onclick` event listener of the Grid, you can obtain the clicked position values through the `ngAfterViewInit` method. This method is appropriate for interacting with the Document Object Model (DOM) and performing operations that require access to the rendered elements. The obtained positions are then sent to the `open` method of the context menu within the `onclick` event of the Grid. Additionally, the default action of right-clicking to open the context menu items items is prevented by utilizing the `created` event of the Grid.
+By using the `onclick` event listener of the Grid, you can obtain the clicked position values through the `useEffect` method. The obtained positions are then sent to the `open` method of the context menu within the `onclick` event of the Grid. Additionally, the default action of right-clicking to open the context menu items items is prevented by utilizing the `created` event of the Grid.
 
 The following example demonstrates how to show context menu on left click using `created` event.