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.
Unfortunately, activation email could not send to your email. Please try again.

AngularJS how to dynamically make changes of the resources in the schedule control

Thread ID:

Created:

Updated:

Platform:

Replies:

128846 Feb 12,2017 12:10 PM Feb 16,2017 11:57 PM JavaScript 3
loading
Tags: ejSchedule
Jan Maticka
Asked On February 12, 2017 12:10 PM

Hello,
I have discovered issue of how to manage resources in ejSchedule during runtime using AngularJS. In future I would like to have select box control of different groups of vehicles and when user changes the group then I want to display right data to ejSchedule. As shown bellow after initialization I call function to bind vehicles as resource of schedule. When it is finished rides are displayed and there are all the needed data in the property ("#RidesSchedule").data("ejSchedule").model.resources[0] as you can see in attached images, but I do not see those vehicles in schedule. The strange thing is if I call $("#RidesSchedule").data("ejSchedule").refresh() in console then all vehicles show up and times of rides are moved one hour forwards. Could you please give me any advice of what I am doing wrong? Thank you very much in advance.

Inicialization of ejSchedule in view.html:

    <ej-schedule id="RidesSchedule"                 
                 e-orientation="horizontal"
                 e-currentdate="vm.viewDate"
                 e-views="vm.views"
                 e-currentview="vm.calendarView"
                 e-group="vm.group"
                 e-appointmentsettings-datasource="vm.rides"
                 e-appointmentsettings-id="rideId"
                 e-appointmentsettings-subject="subject"
                 e-appointmentsettings-starttime="startsAt"
                 e-appointmentsettings-endtime="endsAt"
                 e-appointmentsettings-description="description"
                 e-appointmentsettings-allday="allDay"
                 e-appointmentsettings-recurrence="recurrence"
                 e-appointmentsettings-recurrencerule="recurrenceRule">
        <e-resources>
            <e-resource e-allowmultiple="false" e-field="vehicleId" e-title="Vehicle" e-name="Vehicles" e-resourcesettings="vm.vehicleResourcedata"></e-resource>
        </e-resources>
    </ej-schedule>

Angular controller:

angular
      .module("app-rides")
      .controller("scheduleController", scheduleController);

    function scheduleController($http) {

        var vm = this; 
        vm.calendarView = "day";
        vm.viewDate = new Date(); //date for schedule
        vm.views = [];

        vm.rides = [];
        vm.group = {
            resources: ["Vehicles"]
        };

        vm.vehicleResourcedata = {
            dataSource: [],
            text: "text", id: "id"
        }; //resource for scheduler

        getVehicles(); //load vehicles to scheduler as resource
        
        //get vehicles as resource
        function getVehicles() {
            $http.get("/api/cars")
                  .then(function (response) {
                      //success
                      for (var i = 0; i < response.data.length; i++) {
                          var car = {
                              text: response.data[i].plateNumber,
                              id: response.data[i].carId
                          };
                          vm.vehicleResourcedata.dataSource.push(car);
                      }
                      getActualRides(); //get actual rides for displayed cars

                  },
                      function (error) {
                          //failure

                      })
                  .finally(function () {
                  });
        }        

        //get data
        function getActualRides() {
            $http.get("/api/rides")
                .then(function (response) {
                    //success
                    bindRidesToSchedule(response.data);                    
                },
                    function (error) {
                        //failure
                    })
                .finally(function () {
                });
        }

        //bind data from db to schedule
        function bindRidesToSchedule(responseData) {
            for (var i = 0; i < responseData.length; i++) {
                var ride = {
                    rideId: responseData[i].rideId, //id of ride which gonna be send to process this ride
                    subject: responseData[i].customer.name + ": " + responseData[i].placeFrom + " - " + responseData[i].placeTo,
                    description: responseData[i].placeFrom + " - " + responseData[i].placeTo,
                    startsAt: moment(responseData[i].timeFrom).toDate(),
                    endsAt: moment(responseData[i].timeTo).toDate(),
                    vehicleId: responseData[i].car.carId 
                }
                vm.rides.push(ride);
            }
            
        }

}

Attachment: screens_f02944b.rar

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 13, 2017 07:31 AM

Hi Jan, 
 
Thank you for contacting Syncfusion support. 
 
In the provided code example, e-appointmentsettings-resourcefields field is not included, therefore only resources are not displayed in Scheduler. We suspect that time zone difference is added for an appointment while using refresh function and kindly include e-appointmentsettings-applytimeoffset="false" to overcome the reported issue. We have prepared the sample to dynamically load the resource in the Scheduler which can be download form the below location. 
 
In the above sample, initially two resources check box will displayed and when a checkbox is checked/unchecked, respective resource will be added/removed from the Scheduler. Kindly refer the below code example used in the sample. 
 
<Code> 
function onChange(args) { // this function will be called when the resource is checked/unchecked 
            var schObj = $("#Schedule1").data("ejSchedule"); 
            dataManager2 = ej.DataManager({ 
                url: '@Url.Action("ownerData","Home")', 
                crossDomain: true 
            }); 
            dataManager2.adaptor = new ej.UrlAdaptor(); 
            var ds = dataManager2.executeQuery(new ej.Query()); 
            ds.done(function (e) { 
                var resourceObject = ej.DataManager(e.result).executeLocal(ej.Query().where("resText", ej.FilterOperators.equal, args.model.text)); // here we will filter particular resource that is checked/unchecked 
                if (args.isChecked) 
                    changeClick(resourceObject); // this function will be called when the resource is checked 
                else 
                    removeClick(resourceObject); // this function will be called when the resource is unchecked 
            }); 
 
        } 
</Code> 

Regards, 
Karthigeyan 


Jan Maticka
Replied On February 16, 2017 04:35 AM

Hi Karthigeyan ,

excellent, that is exactly what I needed. Thank you a million for your assistance.

Kind regards

Jan

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 16, 2017 11:57 PM

Hi Jan,  
 
Thanks for your update. 
 
We are happy to hear that our solution has fulfilled your requirement. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;