We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
New Product Launch - BoldDesk !
Introducing help desk ticketing software.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
class CustomAdaptor extends UrlAdaptor {
beforeSend(dm: DataManager, request: XMLHttpRequest): void {
request.setRequestHeader("Authorization", "bearer");
}
processQuery(dm: DataManager, query: Query, hierarchyFilters?: Object[]): Object{
return {
// send query based on your service
};
}
}
this.data = new DataManager({
url: 'api/Orders/DataSource',
insertUrl: "api/Orders/Insert",
updateUrl: "api/Orders/Update",
removeUrl: "api/Orders/Delete",
adaptor: new CustomAdaptor
}); |
|
var isEssential = true;
ej.grids.Grid.Inject(ej.grids.Page);
grid = new ej.grids.Grid({
dataSource: { result: [], count: 0 },
dataStateChange: function (args) { // dataStateChage event of Grid can triggered in every data change of Grid
getData(args.skip, args.take); // you can execute your service with page queries.
},
dataSourceChanged: function (args) {
getData(args); // in here you can execute your service while perform the CRUD actions.
},
allowPaging: true,
load: load,
columns: [
{ field: 'EmployeeID', headerText: 'EmployeeID', width: 160 },
{ field: 'CustomerID', headerText: 'CustomerID', width: 160 },
{ field: 'ShipCity', headerText: 'ShipCity', width: 160 }
],
height: "100%",
});
grid.appendTo('#Grid');
function load() {
if (isEssential) {
var obj = document.getElementById("Grid").ej2_instances[0];
var pageSize = obj.pageSettings.pageSize;
var currentPage = 0;
page = getData(pageSize, currentPage); // inital load need to generate skip and take query based on Grid pageSettings
}
}
function getData(skip, take) {
// skip and take queries handle the on-demand loading concept
// you can execute your service with skip and take queries
//once if you get a data from your service you can bind the json data into Grid as below way.
// please handle the CURD actions here
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
grid.dataSource = { result :data, count: count }; // you need bind the data into grid in this way. Count specifies the total number of record. So you need to return your whole data count from server.
} |
I'm evaluating Syncfusion EJ2 React and come accross this post and I was really surprised how Syncfusion support team work. They just answer something doesn't even related to the question. It have been nearly 2 years and we still have to use XMLHttpRequest in CustomDataAdaptor. What kind of custom is that ?
Let say I have an open api service with generated clients which use axios and now I have to implement
dataSourceChanged in all the grid involved ? What about other control that use this data like select box, list,...
Maybe Charles was right, Telerik and DevExpress are better suites.
Hi Dat,
Sorry for the inconvenience caused.
Currently we are validating your query, we will provide further details on or before 27th April, 2022. We appreciate your patience until then.
Regards,
Joseph I.
Hi Dat,
Thanks for the patience.
We are glad to announce that our Essential Studio 2021 Volume 1 release (v19.1.54) is rolled out successfully and in that release, we have included the following feature - “Need to provide ajaxAdaptor support in DataManager”. So please update your package to this version to include this feature.
Release Notes: https://ej2.syncfusion.com/documentation/release-notes/19.1.54/?type=all#datamanager
We thank you for your support and appreciate your patience in waiting for this release.
Based on your query you want to update the CRUD actions at the server side also
using the axios. So, we have prepared sample and in that we have used the
actionBegin event. Using the actionBegin event you can send the data to the
server side using axios when you perform CRUD actions in the Grid component.
In the prepared sample we have displayed CRUD action data in the console. So, you can use the axios to send the displayed data to sever side to update the CRUD actions at the server side, please refer the below sample for your reference.
Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#binding-with-ajax
Note: Using similar approach as the above documentation you can also make you axios call to retrieve the data and bind it the Grid’s dataSource property.
Sample: https://stackblitz.com/edit/react-vbxatn-wyfgaw?file=index.js
In your update you have also mentioned that you want to know details on some other
controls which use data. Please share the components which you want the details
on binding the data using axios.
Please get in touch with us if you would require any further assistance.
Regards,
Joseph I
