Highlight row in Timeline Day view by clicking on resource column row

[Mark]

So as the subject says, in the schedule event, is it possible to click on the name of the resource, i.e. employee name and have it highlight their whole row for the day?  We are building a scheduling tool and some places have lots of employees, so just trying to help clarify who they are working on.  In the generated HTML, I see that the rows are grouped by `data-group-index` so I am hoping there is a way to hook into that and just apply some CSS.

Thank you!

[Ravikumar Venkatesan]

Hi Mark, 

Greetings from Syncfusion support. 

We have validated your reported query “click on the name of the resource, i.e. employee name and have it highlight their whole row for the day?” at our end. We have achieved your requirement with the help of the below code. 

[index.js] 

ej.base.enableRipple(true); 

 

var data = new ej.base.extend([], window.resourceData.concat(window.timelineResourceData), null, true); 

var isBinded = false; 

 

var scheduleOptions = { 

  width: '100%', 

  height: '650px', 

  selectedDate: new Date(2018, 3, 4), 

  views: ['TimelineDay'], 

  currentView: 'TimelineDay', 

  group: { 

    resources: ['Projects', 'Categories'] 

  }, 

  resources: [ 

    { 

      field: 'ProjectId', title: 'Choose Project', name: 'Projects', 

      dataSource: [ 

        { text: 'PROJECT 1', id: 1, color: '#cb6bb2' }, 

        { text: 'PROJECT 2', id: 2, color: '#56ca85' }, 

        { text: 'PROJECT 3', id: 3, color: '#df5286' } 

      ], 

      textField: 'text', idField: 'id', colorField: 'color' 

    }, { 

      field: 'TaskId', title: 'Category', 

      name: 'Categories', allowMultiple: true, 

      dataSource: [ 

        { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' }, 

        { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' }, 

        { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' }, 

        { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' }, 

        { text: 'Micheal', id: 5, groupId: 3, color: '#df5286' }, 

        { text: 'Root', id: 6, groupId: 3, color: '#00bdae' } 

      ], 

      textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color' 

    } 

  ], 

  eventSettings: { 

    dataSource: data 

  }, 

  dataBinding() { 

    if (!isBinded) { 

      bindClickEvent(); 

      isBinded = true; 

    } 

  }, 

  actionComplete(args) { 

    if (args.requestType === 'dateNavigate' || args.requestType === 'viewNavigate') { 

      bindClickEvent(); 

    } 

  } 

}; 

var scheduleObj = new ej.schedule.Schedule(scheduleOptions, '#Schedule'); 

 

function bindClickEvent() { 

  var resourceHeaders = document.querySelectorAll('.e-resource-cells.e-child-node'); 

  for (var i = 0; i < resourceHeaders.length; i++) { 

    resourceHeaders[i].addEventListener('click', onClick); 

  } 

} 

 

function onClick(args) { 

  var index = args.currentTarget.getAttribute('data-group-index'); 

  var rule = "td.e-work-cells[data-group-index='" + index + "']"; 

  var cells = document.querySelectorAll(rule); 

  if (!cells[0].classList.contains('e-selected')) { 

    var alreadyHighlightedCells = document.querySelectorAll('.e-selected'); 

    if (alreadyHighlightedCells.length > 0) { 

      for (var i = 0; i < alreadyHighlightedCells.length; i++) { 

        alreadyHighlightedCells[i].classList.remove('e-selected'); 

      } 

    } 

    for (var i = 0; i < cells.length; i++) { 

      cells[i].classList.add('e-selected'); 

    } 

  } 

} 

 

[index.html] 

<style> 

  .e-selected { 

    background-color: #5978eebf !important; 

  } 

</style> 

Sample: https://stackblitz.com/edit/ej2-js-schedule-highlight-selected-resource-cells-6wxmd3?file=index.html 

Kindly try the above sample and get back to us If you would require further assistance. 

API (actionComplete event): https://ej2.syncfusion.com/javascript/documentation/api/schedule/#actioncomplete 

API (databinding event): https://ej2.syncfusion.com/javascript/documentation/api/schedule/#databinding 

Regards, 

Ravikumar Venkatesan 

[Mark]

Awesome and perfect!  Thank you so much!

[Vengatesh Maniraj]

Hi Mark, 

You are most welcome.  

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh