Update recources after event add

Vadims Talapins

Asked On May 9, 2019 11:00 AM UTC

I have a problem, and I try to count the total number of hours in events for each resource.

At the time of loading, the value of the resource's time will be calculated and loaded by api. The problem is how to change this value at the moment of changing, acquiring, adding an event. Or can somehow redraw this field at the time of the successful change.

<e-resources> 
 <e-resource aria-readonly="true" :allowMultiple='allowMultiple'  field='person_id' title='Employees' name='person' :dataSource='employeeDataSource'
          textField='Text' idField='Id'colorField='Color'> </e-resource>
 </e-resources>
 


var resourceHeaderVue = Vue.component("resourceHeader", {
               template: `<div class='template-wrap'>
               <img class="employee-image" :src="getImage(data)" :alt="getImage(data)"/>
                <div class="employee-name">{{getEmployeeName(data)}}</div>
                <div class="employee-time">{{getEmployeeTime(data)}}</div>
                </div>`,

        data() {
            return {
                data: {}
            };
        },
                      methods: {
            getEmployeeName: function (data) {
                     
                let value = JSON.parse(JSON.stringify(data));
                return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;
            },
                        getImage: function(data) {
                   let value = JSON.parse(JSON.stringify(data));
 
                return 'images/fotos/'+ value.resourceData.Id +'.jpg';
            },
 
            getEmployeeTime: function (data) {
                let value = JSON.parse(JSON.stringify(data));
                return value.resourceData.Time;
            },

        }
    });


    export default Vue.extend({
        data: function () {
            return {



}
},

  methods:{



         onRenderCell: function (args) {

                if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {
                    let target = args.element.querySelector('.e-resource-text');
                    target.innerHTML = '<div class="name">Employee</div><div class="capacity">Working Hours</div>';
                }
            },


}

Reply | Reply with quote

Vadims Talapins

Replied On May 14, 2019 06:30 AM UTC

I have found one solution but, is one question. How can I get all events by "group Index" to calculate time.

onEventRendered: function (args) {

let resource = this.$refs.ScheduleObj.getResourcesByIndex(args.element.dataset.groupIndex);
let resuurceEvents = ????????????
(Calculations by resuurceEvents)
resource.resourceData.Time = timeCount;
}

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On May 14, 2019 11:32 AM UTC

Hi Vadims,

Greetings from Syncfusion.

We have prepared the below sample to display the events duration in each resource header using eventRendered and dataBinding events.

http://www.syncfusion.com/downloads/support/forum/144504/ze/Schedule1823531841

onEventRendered: function(args) {

let totalEvents = this.$refs.ScheduleObj.ej2Instances.eventsData;

var dm = new DataManager({ json: totalEvents });

let resources = this.$refs.ScheduleObj.ej2Instances.resources[0]

.dataSource;

resources.forEach(function(resource) {

var hours = 0;

var datasource = dm.executeLocal(

new Query().where("person_id", "equal", resource.Id)

);

datasource.forEach(function(data) {

hours += Math.abs(data.EndTime - data.StartTime) / 36e5;

});

document.getElementById(resource.Id).innerHTML = hours + " Hours";

});

},

ondataBinding: function(args) {

if (args.result.length == 0) { // This function is to update the resource header when last event is deleted in Schedule

let resources = this.$refs.ScheduleObj.ej2Instances.resources[0]

.dataSource;

resources.forEach(function(resource) {

document.getElementById(resource.Id).innerHTML = 0 + " Hours";

});

}

Regards,

Karthi

Reply | Reply with quote

Vadims Talapins

Replied On May 20, 2019 07:45 AM UTC

Thank you!

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On May 20, 2019 10:10 AM UTC

Hi Vadims,

You are most welcome!

Regards,

Nevitha

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144504	May 9,2019 11:00 AM UTC	May 20,2019 10:10 AM UTC	Vue	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US