scrollToRessource

Question

i need to scroll to an spezial employee in my schedule ..

i tried this - but was not working.. do you have an example for me?

 const resourceId = this.gotoAic;
        const scheduleObj = schedule.ej2Instances;
        debugger;
        !scheduleObj.scrollToResource(resourceId as string, "Employee");

Attachment: Bildschirmfoto_20210517_um_14.56.31_5d37d1f.zip

Praveenkumar Narasimhanaidu · Accepted Answer

Hi Isabelle, 

Greetings from Syncfusion support..! 

We have prepared a working sample using scrollToResource method which can be viewed from following link.  

Sample: https://codesandbox.io/s/ej2-vue-schedule-scroll-to-resource-o4i33 
App.vue 




   onSubmit: function () { 
      const scheduleObj = document.querySelector(".e-schedule") 
        .ej2_instances[0]; 
      scheduleObj.scrollToResource(2, "Owners"); 
    }, 

Kindly check whether the resource id passed to scrollToResource available in scheduler, if you still face the issue please try to share issue replicating sample or entire scheduler code to validate the problem further. 

Regards, 
Praveenkumar

Isabelle Fuchs · Answer

thanks - with the button it works - but i cant use a button i have to scroll to the Employee when loading is finished - in which part do i have to scroll - i also want to scroll to the today in timeline Month view

thanks

Praveenkumar Narasimhanaidu · Answer

Hi Isabelle, 

Thanks for your update. 

We have validated your requirement “Scroll to employee and current day in timeline month view when loading is finished” and let you know that, you can achieve this requirement using scrollToResource and scrollTo methods inside scheduler dataBound event. We have also modified the sample for your reference which can be viewed from following link. 

Sample: https://codesandbox.io/s/ej2-vue-schedule-scroll-to-resource-o4i33?file=/src/App.vue 
App.vue 




onDataBound: function () { 
      if (flag) { 
        const scheduleObj = document.querySelector(".e-schedule") 
          .ej2_instances[0]; 
        scheduleObj.scrollToResource(2, "Owners"); 
        scheduleObj.scrollTo(null, new Date()); 
        flag = false; 
      } 
    }, 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Praveenkumar

Isabelle Fuchs · Answer

it is working! but one more question - can i set a backgroundColor for the selected row?thanks

Nevitha Ravi · Answer

Hi Isabelle, 

Thanks for you update. 

We are happy that our previous solution worked at your end. You can set background cell to the selected row using hover event. Please refer to the following sample. 
https://codesandbox.io/s/ej2-vue-schedule-cross-hair-highlights-dmo9z?file=/src/App.vue 

onHover: function (args) { 
      let horizontalTarget = args.element.getAttribute("data-group-index"); 
      //let vertcalTarget = args.element.getAttribute("data-date"); 
 
      let workCells = document.querySelectorAll(".e-work-cells"); 
      [].forEach.call(workCells, function (ele) { 
        // if ( 
        //   ele.getAttribute("data-group-index") === horizontalTarget || 
        //   ele.getAttribute("data-date") === vertcalTarget 
        // ) { 
        if (ele.getAttribute("data-group-index") === horizontalTarget) { 
          ele.classList.add("temp"); 
        } else { 
          ele.classList.remove("temp"); 
        } 
      }); 
    }, 

If you want to select the corresponding date also uncomment the code snippets in onHover method and let us know if you need any further assistance. 

Regards, 
Nevitha