How to use Angular Js ajax with dx-scheduler - angularjs

Question

I am using dx-scheduler calendar and i'm trying to use crud operations for the meetings. I wonder how can i use functions in DevExpress.data.AspNet.createStore instead of their own api methods - here is an example of their API :
DevExpress.data.AspNet.createStore({
key: "AppointmentId",
loadUrl: url + "/Get",
insertUrl: url + "/Post",
updateUrl: url + "/Put",
deleteUrl: url + "/Delete",
onBeforeSend: function(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
}
}),
I want to achieve this :
DevExpress.data.AspNet.createStore({
key: "AppointmentId",
loadUrl: function(){
$http.get("/getApi").then(function(){
// manipulate the fetched data
})
},
insertUrl: : function(values){
// manipulate the values before post
$http.post("/getApi", values).then(function(){
}),
onBeforeSend: function(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
}
}),
Example.

Answer 1

According to Documentation in this link
loadUrl - the URL used to load data. I assume that you should pass the URL string here for your get api.
if parameters is needed for your get request you can send them using LoadParams Option
loadParams - additional parameters that should be passed to loadUrl.
and handle the result by implementing the onLoaded ..
onLoaded - refer to CustomStore.onLoaded.
$scope.schedulerOptions = {
dataSource: DevExpress.data.AspNet.createStore({
key: "AppointmentId",
// loadUrl: 'https://jsonplaceholder.typicode.com/posts',
loadUrl: "https://jsonplaceholder.typicode.com/posts",
insertUrl: url + "/Post",
updateUrl: url + "/Put",
deleteUrl: url + "/Delete",
onBeforeSend: function(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
onLoaded:function(result){
console.log(result)
var data = result;
for (var i in data) {
data[i].StartDate = '2020-12-20T10:00:00Z';
data[i].EndDate = '2020-12-20T11:00:00Z';
}
return data;
}
}),
// remoteFiltering: true,
dateSerializationFormat: "yyyy-MM-ddTHH:mm:ssZ",
views: ["day", "workWeek", "month"],
currentView: "day",
currentDate: new Date(),
startDayHour: 9,
endDayHour: 19,
height: 600,
textExpr: "title",
startDateExpr: "StartDate",
endDateExpr: "EndDate",
allDayExpr: "AllDay"
};
The result from the get request is printed in the console in the onLoaded function
The data you are using in your example in this json
https://jsonplaceholder.typicode.com/posts
Does not contain EndDate , maybe if you modified it to include Start Date and EndDate with the same dateSerializationFormat it will work, I modified them manually and it worked, I also modified textExpr to display title.
your Example link modified
In order to use your own Ajax request , you can use the following work around, Initialize the schedulerOptions after you do your Ajax call using the result as data resource. Example link
Html :
<div class="dx-viewport demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div dx-scheduler="schedulerOptions" ng-if=dataSet></div>
</div>
JS:
$scope.dataSet;
var loadFromUrl = function () {
$http.get('https://jsonplaceholder.typicode.com/posts')
.then(function(result){
$scope.dataSet = result.data;
for (var i in $scope.dataSet) {
$scope.dataSet[i].startDate = '2020-12-20T10:00:00Z';
$scope.dataSet[i].endDate = '2020-12-20T11:00:00Z';
}
$scope.schedulerOptions = {
dataSource: $scope.dataSet,
dateSerializationFormat: "yyyy-MM-ddTHH:mm:ssZ",
views: ["day", "workWeek", "month"],
currentView: "day",
currentDate: new Date(),
startDayHour: 9,
endDayHour: 19,
height: 600,
textExpr: "title",
startDateExpr: "startDate",
endDateExpr: "endDate",
allDayExpr: "AllDay"
};
})
};
loadFromUrl();