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. Image for the cookie policy date

Scheduler component highlight event when we drop any activity

Scheduler component highlight event when we drop any activity
I want to achieve below view in scheduler.
When user drop any activity I am making it selected, but I want to select whole row and related column of event. 
Please help me to add this functionality

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team April 11, 2019 10:21 AM UTC

Hi Sonam, 
Greetings from Syncfusion. 
We have prepared the below sample to highlight the event dropped row using dragStop event. 
tr.hoverTable td.e-work-cells, 
tr.hoverTable td.e-work-cells.e-work-hours, 
tr.hoverTable td.e-work-cells.e-alternate-cells, 
tr.hoverTable td.e-work-cells.e-alternate-cells.e-work-hours { 
    background-color: #deeeac !important; 
    border: 1px solid #deeeac !important; 
onDragStop(args) { 
       let trElement = this.scheduleObj.element.querySelector('.hoverTable'); 
        if (trElement) { 
            removeClass([trElement], 'hoverTable'); 
      var element = args.event.target; 
      var cellDetail = this.scheduleObj.getCellDetails(element); 
      var rows = this.scheduleObj.getTableRows(); 
      var currentRow = rows[cellDetail.groupIndex]; 
       addClass([currentRow], 'hoverTable'); 

SD Sonam Diwate April 11, 2019 01:43 PM UTC

Thanks for the quick reply.
But In my case we are adding new resource dynamically, and then we need to highlight that resource. So when I am using this example to shows for some time then reset to default as scheduler get re-render again. So do we have any event where we can add this logic.

VD Vinitha Devi Murugan Syncfusion Team April 12, 2019 05:44 PM UTC

Hi Sonamric, 
We have prepared the sample as per your requirement, Which can be viewed from the below link.  
Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this. 
M.Vinitha devi. 

SD Sonam Diwate April 16, 2019 10:31 AM UTC

Could you please share POC for vertical line also as shown below:

NR Nevitha Ravi Syncfusion Team April 17, 2019 01:01 PM UTC

Hi Sonamric, 

Thanks for your update. 

We have modified our previously shared sample as per your shared screenshot which can be viewed from the following link. 

onDragStop(args) { 
    var borderRows = this.scheduleObj.element.querySelectorAll('.hoverTable'); 
    borderRows.forEach(function (row) { removeClass([row], 'hoverTable'); }); 
    var rows = this.scheduleObj.getTableRows(); 
    var resource = this.scheduleObj.element.querySelectorAll('.e-resource-column-wrap tr'); 
    var rowIndex = this.scheduleObj.eventBase.getGroupIndexFromEvent(args.data); 
    var resourceRow = resource[rowIndex]; 
    var workCellsRow = rows[rowIndex]; 
    addClass([resourceRow, workCellsRow], 'hoverTable'); 
    this.appRow = args.data.CalendarId; 

tr.hoverTable td { 
    border-top: 1px solid red !important; 
    border-bottom: 1px solid red !important; 
tr.hoverTable td:first-child { 
   border-left: 1px solid red !important; 
tr.hoverTable td:last-child { 
   border-right: 1px solid red !important; 


SD Sonam Diwate April 19, 2019 02:22 PM UTC

Here in my case onDragStop is not getting trigger as I am using
nodeDragStop event is getting triggered.

Basically my requirement is to draw vertical blue line on event in scheduler. which will expand till end

NR Nevitha Ravi Syncfusion Team April 22, 2019 01:29 PM UTC

Hi Sonamric, 

Thanks for your update. 

We have ported the customization done in dragStop event to nodeDragStop event and the sample can be viewed from the following link. 

onTreeDragStop(event) { 
    let treeElement = closest(event.target, '.e-treeview'); 
    let classElement = this.scheduleObj.element.querySelector('.e-device-hover'); 
    if (classElement) { 
    if (!treeElement) { 
      event.cancel = true; 
      let scheduleElement = closest(event.target, '.e-content-wrap'); 
      if (scheduleElement) { 
        let treeviewData = this.treeObj.fields.dataSource; 
        if (event.target.classList.contains('e-work-cells')) { 
          const filteredData = treeviewData.filter((item) => item.Id === parseInt(event.draggedNodeData.id, 10)); 
          let cellData = this.scheduleObj.getCellDetails(event.target); 
          let resourceDetails = this.scheduleObj.getResourcesByIndex(cellData.groupIndex); 
          let eventData = { 
            Name: filteredData[0].Name, 
            StartTime: cellData.startTime, 
            EndTime: cellData.endTime, 
            IsAllDay: cellData.isAllDay, 
            Description: filteredData[0].Description, 
            CalendarId: resourceDetails.resourceData.CalendarId 
          this.scheduleObj.openEditor(eventData, 'Add', true); 
          this.target = event.target; 
          this.flag = true; 
          this.isTreeItemDropped = true; 
          this.draggedItemId = event.draggedNodeData.id; 


Live Chat Icon For mobile
Up arrow icon