Skip to content

Commit 0bb0275

Browse files
jmfarook7jmfarook7
authored
Merge pull request #2997 from syncfusion-content/EJ2-889412-odata
889412: Updating the documentation of odataV4 adaptor topic
2 parents ecf27e5 + fedbb7a commit 0bb0275

File tree

6 files changed

+234
-14
lines changed

6 files changed

+234
-14
lines changed

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

Lines changed: 113 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,11 @@ The following code example shows how to bind ExpandoObject datasource in grid us
6767
{% endtabs %}
6868
{% endif %}
6969

70-
N> Perform data and CRUD operations for complex ExpandoObject binding fields as well.
70+
> Perform data and CRUD operations for complex ExpandoObject binding fields as well.
7171
7272
The following image represents ExpandoObject complex data binding.
73-
![Grid with ExpandoObject Binding](images/ExpandoObjectDemo.gif)
73+
74+
![Grid with ExpandoObject Binding](../../images/ExpandoObjectDemo.gif)
7475

7576
## DynamicObject with complex column binding using URL adaptor
7677

@@ -101,10 +102,11 @@ The following code example shows how to bind DynamicObject datasource in grid us
101102
{% endtabs %}
102103
{% endif %}
103104

104-
N> Perform data and CRUD operations for complex DynamicObject binding fields as well.
105+
> Perform data and CRUD operations for complex DynamicObject binding fields as well.
106+
107+
The following image represents DynamicObject complex data binding.
105108

106-
The following image represents DynamicObject complex data binding.
107-
![Grid with DynamicObject Binding](images/DynamicObjectDemo.gif)
109+
![Grid with DynamicObject Binding](../../images/DynamicObjectDemo.gif)
108110

109111
## OData adaptor - Binding OData service
110112

@@ -160,6 +162,112 @@ The ODataV4 is an improved version of OData protocols, and the DataManager can a
160162
{% endtabs %}
161163
{% endif %}
162164

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

165273
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: 113 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,11 @@ The following code example shows how to bind ExpandoObject datasource in grid us
6666
{% endtabs %}
6767
{% endif %}
6868

69-
N> Perform data and CRUD operations for complex ExpandoObject binding fields as well.
69+
> Perform data and CRUD operations for complex ExpandoObject binding fields as well.
7070
71-
The following image represents ExpandoObject complex data binding.
72-
![Grid with ExpandoObject Binding](images/ExpandoObjectDemo.gif)
71+
The following image represents ExpandoObject complex data binding.
72+
73+
![Grid with ExpandoObject Binding](../../images/ExpandoObjectDemo.gif)
7374

7475
## DynamicObject with complex column binding using URL adaptor
7576

@@ -100,10 +101,11 @@ The following code example shows how to bind DynamicObject datasource in grid us
100101
{% endtabs %}
101102
{% endif %}
102103

103-
N> Perform data and CRUD operations for complex DynamicObject binding fields as well.
104+
> Perform data and CRUD operations for complex DynamicObject binding fields as well.
104105
105106
The following image represents DynamicObject complex data binding.
106-
![Grid with DynamicObject Binding](images/DynamicObjectDemo.gif)
107+
108+
![Grid with DynamicObject Binding](../../images/DynamicObjectDemo.gif)
107109

108110
## OData adaptor - Binding OData service
109111

@@ -159,6 +161,112 @@ The ODataV4 is an improved version of OData protocols, and the `DataManager` can
159161
{% endtabs %}
160162
{% endif %}
161163

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

164272
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.

‎ej2-asp-core-mvc/grid/images/DynamicObjectDemo.gif

-1.22 MB
Loading

‎ej2-asp-core-mvc/grid/images/ExpandoObjectDemo.gif

-1.06 MB
Loading

0 commit comments

Comments
 (0)