Update recources after event add

[Vadims Talapins]

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>';

}

},

}

[Vadims Talapins]

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;

}

[Karthigeyan Krishnamurthi]

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 

[Vadims Talapins]

Thank you!

[Nevitha Ravi]

Hi Vadims, 

  

You are most welcome! 

  

Regards, 

Nevitha