Combined data grid & TimeView Scheduler

Question

Hello,Is it possible to combine a data grid and a Time View Scheduler? I am playing around with the scheduler (see screenshot):On the place of the room names I wound like to place a grid where every row has a timeline next to it..... Is this possible? Do you have a small example how to do this?Thanks in advance for your help and advice!Peter

Nevitha Ravi · Answer

Hi Peter, 

Greetings from Syncfusion Support. 

We have check the shared screenshot and suspect that your requirement is to have grid in resources for that you can use resource header template with some CSS customization. We hope that you have followed the below demo sample and missed to add CSS in your application due to that grid is missed at your end.  
https://ej2.syncfusion.com/vue/demos/#/material/schedule/timeline-resource.html 

Can you please add the respective CSS in the style section and let us know this meets your requirement? 

Regards, 
Nevitha

Peter Vledder · Answer

Hi Nevitha,Thanks for your help. I understand that with the header template I can incorporate the Data Grid but how can I combine the two in a way that they work together? So for instance how can I make sure that when I sort or filter the grid the timelines are also gets sorted or filtered?Thanks again for your help.Regards,Peter

Hareesh Balasubramanian · Answer

Hi Peter, 

Thanks for the update. 

Q1: I understand that with the header template I can incorporate the Data Grid but how can I combine the two in a way that they work together? 
For this query, we suspect that your requirement is to render the Grid component inside the Scheduler’s resourceHeaderTemplate property but unfortunately, we are not able to render it inside the Scheduler. But we can able to render the Grid component outside the scheduler and can achieve the same functionalities like filtering/sorting for the resources while performing in the Grid. 

Q2: how can I make sure that when I sort or filter the grid the timelines are also gets sorted or filtered? 
This query can be achieved using actionComplete event of the Grid component, We have prepared a sample, in that when we filter the Grid rows using filers then the same can be applied to the Scheduler, which can be viewed from the following link. 

Sample: https://codesandbox.io/s/vue-schedule-resources-filtering-using-grid-hjerz  





  gridActionComplete: function (args) { 
    if (args.requestType === "filtering" && args.action === "filter") { 
      var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 
      schObj.resources[0].dataSource = this.$refs.GridObj.getFilteredRecords( 
        args.columns 
      ); 
    } else if ( 
      args.requestType === "filtering" && 
      args.action === "clear-filter" 
    ) { 
      var sch = document.querySelector(".e-schedule").ej2_instances[0]; 
      sch.resources[0].dataSource = this.$refs.GridObj.dataSource; 
    } 
  }, 

Kindly try the above solution and get back to us if you need any further assistance. 

W will happy to assist you..! 

Regards, 
Hareesh

Peter Vledder · Answer

Hi Hareesh,Thanks for your help! I managed to get the grid and the time lines next to each other:I have hidden the resource column of the schedule component with the following code:                var resourceColumn = document.querySelector('.e-resource-column-wrap');                resourceColumn.parentNode.hidden = true;                document.querySelector(".e-resource-left-td").hidden = true;But now I would like to limit the amount of displayed hours so I add startHour '07:00' endHour='19:00' to the  component. This result in:As you can see the appointments are shifted to the left. If I restore the resource column again the schedule is fixed ... how could I solve this?Thanks in advance for you help!Regards,Peter

Hareesh Balasubramanian · Answer

Hi Peter, 

Thanks for the update. 

We have prepared a sample to reproduce your reported issue “events are not properly rendering their respective slots” unfortunately, we were unable to reproduce your reported problem and the sample can be downloaded from the following link. We have tried the following ways to replicate the issue at our end. 


We have removed the scheduler resources using CSS and dataBound event of the Scheduler.
Also we have customized the Scheduler start and end hour using startHour and endHour properties but the events are properly rendering in their respective slots.

Sample: https://codesandbox.io/s/vue-schedule-resources-filtering-using-grid-forked-966hz?file=/src/App.vue  





td.e-resource-left-td { 
  display: none; 
} 
tr.e-columnheader { 
  height: 116px; 
} 
tr.e-row { 
  height: 60px; 
} 





onDataBound: function () { 
  document.querySelector(".e-resource-column-wrap").parentElement.style.display = "none"; 
}, 


  

Kindly refer to the above sample, also share the below details to validate your reported issue and serve you better. 

Kindly share the entire Schedule component rendering code snippets.
If possible, replicate the issue in the above sample.
Share the issue replicating sample (if possible) in order to validate further at our end.

We will be happy to assist you..! 

Regards, 
Hareesh

Peter Vledder · Answer

Sorry for my late reply. I can reproduce it in your example too. If you maximize the "browser part" of you sandbox example the page still looks correct:

But if you switch from day to week and then back to day you will get:

For you information: I am on a 27" monitor with a resolution of 2560 * 1440

Peter Vledder · Answer

Except from the above issue, I am struggling to set the cell width in you example. Looks like table-layout is set to fixed so I can not set cell width?

Hareesh Balasubramanian · Answer

Hi Peter, 

Thanks for the update. 

We have validated your both the queries and modified our previously updated sample, which can be viewed from the following link, 
https://codesandbox.io/s/vue-schedule-resources-filtering-using-grid-forked-966hz?file=/src/App.vue:6204-6278 

Q1: Scroller is not visible in higher resolution monitors. 
We can replicate your reported problem at our side and by default the horizontal scroller will be based on the screen’s resolution such that, when the content area’s width is lesser than the screen resolution then the scroller won’t appears. You can achieve your requirement “render the horizontal scroller to the visible all the time” with the below CSS. 





.e-schedule .e-timeline-view .e-content-wrap { 
  overflow-x: scroll; 
} 

Q2: Need to adjust the width of the scheduler cells. 
The above requirement can be achieved using the below CSS and the same can be viewed in the above sample too. 





.e-schedule .e-timeline-view .e-content-wrap table col { 
  width: 100px; 
} 

UG: https://ej2.syncfusion.com/vue/documentation/schedule/cell-customization/#setting-cell-dimensions-in-all-views  

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 
Hareesh

Peter Vledder · Answer

Thanks for your answers. The issue in question 1 is not about the scrollbar but about the appointment that should start at 9 but is not rendered correctly (starts earlier than 830). I think it has something to do with the size of the browser window. When I resize my screen to 1920 x 1980 it works correctly but with full screen (2560 x 1440) I get strange behavior as you can see in my last screenshot ....

I hope you guys can fix this for us! Your help is much appreciated!

Hareesh Balasubramanian · Answer

Hi Peter,  
  
We have created a new incident under your Direct-Trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
  
https://www.syncfusion.com/account/login  
  
Regards,  
Hareesh