You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
140
+
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
141
141
142
-
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.
142
+
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.
@@ -178,7 +178,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
178
178
179
179
**Step 4: Adding Syncfusion component**
180
180
181
-
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`.
181
+
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`.
182
182
183
183
{% tabs %}
184
184
{% highlight ts tabtitle="App.tsx" %}
@@ -206,9 +206,9 @@ export default App;
206
206
{% endhighlight %}
207
207
{% endtabs %}
208
208
209
-
> Replace https://localhost:****/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
209
+
> 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).
210
210
211
-
Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xx.
211
+
Run the application in Visual Studio. It will be accessible on a URL like https://localhost:xxxx.
212
212
213
213
> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
127
+
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
128
128
129
-
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.
129
+
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.
@@ -165,7 +165,7 @@ Include the necessary CSS files in your `styles.css` file to style the Syncfusio
165
165
166
166
**Step 3: Adding Syncfusion component**
167
167
168
-
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`.
168
+
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`.
169
169
170
170
{% tabs %}
171
171
{% highlight ts tabtitle="App.tsx" %}
@@ -190,8 +190,8 @@ export default App;
190
190
{% endhighlight %}
191
191
{% endtabs %}
192
192
193
-
> 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).
194
-
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xx**.
193
+
> 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).
194
+
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
195
195
196
196
> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
Copy file name to clipboardExpand all lines: ej2-react/grid/context-menu.md
+6-8Lines changed: 6 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -80,14 +80,12 @@ The following example demonstrates how to enable context menu feature in the gri
80
80
## Custom context menu items
81
81
82
82
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.
83
-
84
-
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.
85
-
86
-
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.
87
-
83
+
88
84
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.
89
-
90
-
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.
85
+
86
+
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.
87
+
88
+
The following example demonstrates how to add custom context menu items in the Grid component.
91
89
92
90
The following example demonstrates how to add custom context menu items in the Grid component.
93
91
@@ -114,7 +112,7 @@ The Syncfusion React Grid provides the ability to show the context menu items on
114
112
115
113
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.
116
114
117
-
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.
115
+
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.
118
116
119
117
The following example demonstrates how to show context menu on left click using `created` event.
0 commit comments