1

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.

1 Answer 1

3
+50

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();
2
  • Anabawi - Thanks, i've already tried what you've suggested - the thing is that i need to use my own $http requests because there are some headers that i'm passing that i could not apply in the ajaxOptions - i know that i can add events like onAppointmentAdding and recreate the same behavior - but i thought it will be really nice to do it like in the example.... and just pass functions....
    – RoyBarOn
    Dec 20, 2020 at 16:08
  • @RoyBarOn you can do that using the work around mentioned in my updated answer Dec 20, 2020 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.