Skip to content

Commit 2dc3359

Browse files
Vinitha-BalasubramanianVinitha-Balasubramanian
committed
889412: Updating the documentation of odataV4 adaptor topic
1 parent a482aa1 commit 2dc3359

File tree

4 files changed

+220
-4
lines changed

4 files changed

+220
-4
lines changed

‎ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/remote-data.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,112 @@ The ODataV4 is an improved version of OData protocols, and the DataManager can a
160160
{% endtabs %}
161161
{% endif %}
162162

163+
## Odata with custom url
164+
165+
The Syncfusion ODataV4 adaptor extends support for calling customized URLs to accommodate data retrieval and CRUD actions as per your application's requirements. However, when utilizing a custom URL with the ODataV4 adaptor, it's essential to modify the routing configurations in your application's route configuration file to align with your custom URL. You can invoke the custom URL by the following methods in the Datamanager
166+
167+
**Configuring Custom URLs**
168+
169+
To work with custom URLs for CRUD operations in the Syncfusion Grid, you can use the following properties:
170+
171+
* insertUrl: Specifies the custom URL for inserting new records.
172+
* removeUrl: Specifies the custom URL for deleting records.
173+
* updateUrl: Specifies the custom URL for updating records.
174+
* batchUrl: Specifies the custom URL for batch editing operations.
175+
176+
> Ensure that the routing configurations on the server-side are properly updated to handle these custom URLs.
177+
178+
The following code example describes the above behavior.
179+
180+
{% if page.publishingplatform == "aspnet-core" %}
181+
182+
{% tabs %}
183+
{% highlight cshtml tabtitle="CSHTML" %}
184+
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
185+
<e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7" adaptor="ODataV4Adaptor"
186+
updateUrl= "https://localhost:xxxx/odata/Orders/Update"
187+
insertUrl= "https://localhost:xxxx/odata/Orders/Insert"
188+
removeUrl= "https://localhost:xxxx/odata/Orders/Delete"
189+
crossdomain="true"></e-data-manager>
190+
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
191+
<e-grid-columns>
192+
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120" isPrimaryKey="true" validationRules="@(new { required=true})"></e-grid-column>
193+
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140" validationRules="@(new { required=true, minLength=3})"></e-grid-column>
194+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
195+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
196+
</e-grid-columns>
197+
</ejs-grid>
198+
{% endhighlight %}
199+
{% endtabs %}
200+
201+
{% elsif page.publishingplatform == "aspnet-mvc" %}
202+
203+
{% tabs %}
204+
{% highlight razor tabtitle="CSHTML" %}
205+
@Html.EJS().Grid("OdataV4").DataSource(dataManger =>
206+
{
207+
dataManger.Url("https://ej2services.syncfusion.com/production/web-services/api/Orders").InsertUrl("https://localhost:xxxx/odata/Orders/Insert").
208+
RemoveUrl("https://localhost:xxxx/odata/Orders/Delete").
209+
UpdateUrl("https://localhost:xxxx/odata/Orders/Update").
210+
CrossDomain(true).
211+
Adaptor("ODataV4Adaptor");
212+
}).Columns(col =>
213+
{
214+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).Add();
215+
col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(new { required = "true", minLength=3 }).Width("160").Add();
216+
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
217+
col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
218+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
219+
220+
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
221+
{% endhighlight %}
222+
{% endtabs %}
223+
{% endif %}
224+
225+
For batch editing, you can specify a custom batch URL as follows:
226+
227+
{% if page.publishingplatform == "aspnet-core" %}
228+
229+
{% tabs %}
230+
{% highlight cshtml tabtitle="CSHTML" %}
231+
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
232+
<e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7" adaptor="ODataV4Adaptor"
233+
BatchUrl="https://localhost:xxxx/odata/Orders/BatchUpdate"
234+
crossdomain="true"></e-data-manager>
235+
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
236+
<e-grid-columns>
237+
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120" isPrimaryKey="true" validationRules="@(new { required=true})"></e-grid-column>
238+
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140" validationRules="@(new { required=true, minLength=3})"></e-grid-column>
239+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
240+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
241+
</e-grid-columns>
242+
</ejs-grid>
243+
{% endhighlight %}
244+
{% endtabs %}
245+
246+
{% elsif page.publishingplatform == "aspnet-mvc" %}
247+
248+
{% tabs %}
249+
{% highlight razor tabtitle="CSHTML" %}
250+
@Html.EJS().Grid("OdataV4").DataSource(dataManger =>
251+
{
252+
dataManger.Url("https://ej2services.syncfusion.com/production/web-services/api/Orders").
253+
BatchUrl("https://localhost:xxxx/odata/Orders/BatchUpdate").
254+
CrossDomain(true).
255+
Adaptor("ODataV4Adaptor");
256+
}).Columns(col =>
257+
{
258+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).Add();
259+
col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(new { required = "true", minLength=3 }).Width("160").Add();
260+
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
261+
col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
262+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
263+
264+
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
265+
{% endhighlight %}
266+
{% endtabs %}
267+
{% endif %}
268+
163269
## Web API Adaptor
164270

165271
You can use **WebApiAdaptor** to bind grid with Web API created using OData endpoint.

‎ej2-asp-core-mvc/grid/EJ2_ASP.MVC/grouping/lazy-load-grouping.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
7070
{
7171
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
7272
}
73-
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
73+
if (dm.IsLazyLoad == false && dm.Sorted != null && dm.Sorted.Count > 0) //Sorting for grouping
7474
{
7575
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
7676
}
@@ -90,6 +90,7 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
9090
if (dm.IsLazyLoad)
9191
{
9292
groupedData = operation.PerformGrouping<Customers>(DataSource, dm); // Lazy load grouping
93+
groupedData = operation.PerformSorting(groupedData, dm); // Sorting with Lazy load grouping
9394
if (dm.OnDemandGroupInfo != null && dm.Group.Count() == dm.OnDemandGroupInfo.Level)
9495
{
9596
count = groupedData.Cast<Customers>().Count();
@@ -103,9 +104,10 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
103104
}
104105
return dm.RequiresCounts ? Json(new { result = groupedData == null ? DataSource : groupedData, count = count }) : Json(DataSource);
105106
}
106-
107107
```
108108

109+
> For optimal performance, especially when dealing with lazy loading grouping, it is recommended to perform sorting after the grouping action.
110+
109111
## Lazy load grouping with infinite scrolling
110112

111113
Infinite scrolling loads a huge amount of data without degrading the Grid's performance. By default, infinite scrolling is enabled only for the expanded grouped rows when lazy loading is enabled. Now, the Grid has an option to allow infinite scrolling for group caption rows. This is achieved by setting the [enableInfiniteScrolling](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EnableInfiniteScrolling) property as true when lazy loading is enabled in the grouped records.

‎ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/remote-data.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,112 @@ The ODataV4 is an improved version of OData protocols, and the `DataManager` can
159159
{% endtabs %}
160160
{% endif %}
161161

162+
## Odata with custom url
163+
164+
The Syncfusion ODataV4 adaptor extends support for calling customized URLs to accommodate data retrieval and CRUD actions as per your application's requirements. However, when utilizing a custom URL with the ODataV4 adaptor, it's essential to modify the routing configurations in your application's route configuration file to align with your custom URL. You can invoke the custom URL by the following methods in the Datamanager
165+
166+
**Configuring Custom URLs**
167+
168+
To work with custom URLs for CRUD operations in the Syncfusion Grid, you can use the following properties:
169+
170+
* insertUrl: Specifies the custom URL for inserting new records.
171+
* removeUrl: Specifies the custom URL for deleting records.
172+
* updateUrl: Specifies the custom URL for updating records.
173+
* batchUrl: Specifies the custom URL for batch editing operations.
174+
175+
> Ensure that the routing configurations on the server-side are properly updated to handle these custom URLs.
176+
177+
The following code example describes the above behavior.
178+
179+
{% if page.publishingplatform == "aspnet-core" %}
180+
181+
{% tabs %}
182+
{% highlight cshtml tabtitle="CSHTML" %}
183+
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
184+
<e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7" adaptor="ODataV4Adaptor"
185+
updateUrl= "https://localhost:xxxx/odata/Orders/Update"
186+
insertUrl= "https://localhost:xxxx/odata/Orders/Insert"
187+
removeUrl= "https://localhost:xxxx/odata/Orders/Delete"
188+
crossdomain="true"></e-data-manager>
189+
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
190+
<e-grid-columns>
191+
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120" isPrimaryKey="true" validationRules="@(new { required=true})"></e-grid-column>
192+
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140" validationRules="@(new { required=true, minLength=3})"></e-grid-column>
193+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
194+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
195+
</e-grid-columns>
196+
</ejs-grid>
197+
{% endhighlight %}
198+
{% endtabs %}
199+
200+
{% elsif page.publishingplatform == "aspnet-mvc" %}
201+
202+
{% tabs %}
203+
{% highlight razor tabtitle="CSHTML" %}
204+
@Html.EJS().Grid("OdataV4").DataSource(dataManger =>
205+
{
206+
dataManger.Url("https://ej2services.syncfusion.com/production/web-services/api/Orders").InsertUrl("https://localhost:xxxx/odata/Orders/Insert").
207+
RemoveUrl("https://localhost:xxxx/odata/Orders/Delete").
208+
UpdateUrl("https://localhost:xxxx/odata/Orders/Update").
209+
CrossDomain(true).
210+
Adaptor("ODataV4Adaptor");
211+
}).Columns(col =>
212+
{
213+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).Add();
214+
col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(new { required = "true", minLength=3 }).Width("160").Add();
215+
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
216+
col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
217+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
218+
219+
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
220+
{% endhighlight %}
221+
{% endtabs %}
222+
{% endif %}
223+
224+
For batch editing, you can specify a custom batch URL as follows:
225+
226+
{% if page.publishingplatform == "aspnet-core" %}
227+
228+
{% tabs %}
229+
{% highlight cshtml tabtitle="CSHTML" %}
230+
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
231+
<e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7" adaptor="ODataV4Adaptor"
232+
BatchUrl="https://localhost:xxxx/odata/Orders/BatchUpdate"
233+
crossdomain="true"></e-data-manager>
234+
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
235+
<e-grid-columns>
236+
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120" isPrimaryKey="true" validationRules="@(new { required=true})"></e-grid-column>
237+
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140" validationRules="@(new { required=true, minLength=3})"></e-grid-column>
238+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
239+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
240+
</e-grid-columns>
241+
</ejs-grid>
242+
{% endhighlight %}
243+
{% endtabs %}
244+
245+
{% elsif page.publishingplatform == "aspnet-mvc" %}
246+
247+
{% tabs %}
248+
{% highlight razor tabtitle="CSHTML" %}
249+
@Html.EJS().Grid("OdataV4").DataSource(dataManger =>
250+
{
251+
dataManger.Url("https://ej2services.syncfusion.com/production/web-services/api/Orders").
252+
BatchUrl("https://localhost:xxxx/odata/Orders/BatchUpdate").
253+
CrossDomain(true).
254+
Adaptor("ODataV4Adaptor");
255+
}).Columns(col =>
256+
{
257+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).Add();
258+
col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(new { required = "true", minLength=3 }).Width("160").Add();
259+
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
260+
col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
261+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
262+
263+
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
264+
{% endhighlight %}
265+
{% endtabs %}
266+
{% endif %}
267+
162268
## Web API adaptor
163269

164270
You can use `WebApiAdaptor` to bind grid with Web API created using OData endpoint.

‎ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/grouping/lazy-load-grouping.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
7070
{
7171
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
7272
}
73-
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
73+
if (dm.IsLazyLoad == false && dm.Sorted != null && dm.Sorted.Count > 0) //Sorting for grouping
7474
{
7575
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
7676
}
@@ -90,6 +90,7 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
9090
if (dm.IsLazyLoad)
9191
{
9292
groupedData = operation.PerformGrouping<Customers>(DataSource, dm); // Lazy load grouping
93+
groupedData = operation.PerformSorting(groupedData, dm); // Sorting with Lazy load grouping
9394
if (dm.OnDemandGroupInfo != null && dm.Group.Count() == dm.OnDemandGroupInfo.Level)
9495
{
9596
count = groupedData.Cast<Customers>().Count();
@@ -103,9 +104,10 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)
103104
}
104105
return dm.RequiresCounts ? Json(new { result = groupedData == null ? DataSource : groupedData, count = count }) : Json(DataSource);
105106
}
106-
107107
```
108108

109+
> For optimal performance, especially when dealing with lazy loading grouping, it is recommended to perform sorting after the grouping action.
110+
109111
## Lazy load grouping with infinite scrolling
110112

111113
Infinite scrolling loads a huge amount of data without degrading the Grid's performance. By default, infinite scrolling is enabled only for the expanded grouped rows when lazy loading is enabled. Now, the Grid has an option to allow infinite scrolling for group caption rows. This is achieved by setting the [enableInfiniteScrolling](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EnableInfiniteScrolling) property as true when lazy loading is enabled in the grouped records.

0 commit comments

Comments
 (0)