Completed
Last Updated: 03 Nov 2022 10:23 by ADMIN
n/a
Created on: 20 Oct 2022 12:18
Category: UI for Blazor
Type: Feature Request
1
timeline component to track hours per day

I need to track users activity per day like this, it is possible to do with any of the current components scheduler timeline? can you provide such option/component?

Need to include different colors in the bar. We were using google charts timeline but it is discontinued.

 

5 comments
ADMIN
Nadezhda Tacheva
Posted on: 03 Nov 2022 10:23

Hi Alberto,

Thank you for the follow-up and for sharing the additional details on your desired scenario. Based on the provided details, it looks like the target here is a complex custom scenario rather than a single built-in functionality.

I browsed through the shared Google Timelines, however, it looks like not all of these features are supported (for example, paging, more columns). I will provide suggestions on how to achieve similar functionalities with the Scheduler or Gantt component. These components are essentially different, so I hope the information below will be a useful starting point for consideration of the most suitable way to achieve your desired result.

Add custom columns 

  • Scheduler - the Scheduler component is closer to a calendar that displays appointments rather than a tool for data management. That said, adding columns is not really applicable here. You can, however, add more content to the group header once its Template is available.

  • Gantt - the Gantt Tree supports columns that you can bind to the fields in your model to display the desired data. You may add as many columns as needed.  

Tooltip 

  • Scheduler - the Scheduler provides a default tooltip for the appointments that displays their start and end times. To include more details in the Tooltip, you may implement a custom one. For that purpose, you can use the Tooltip component. This approach is demonstrated in the following sample application: Appointment Tooltips.

  • Gantt - the Gantt component supports an integrated Tooltip component for the tasks out of the box. By default, it displays the task title, percent completion, start and end times. If needed, you may additionally customize the Tooltip through a Template.

Paging

Having in mind the nature of both of the discussed components, a paging functionality is not applicable and let me provide some more clarification on the matter.

  • Scheduler - an appointment calendar normally allows the user navigates through different periods of time depending on the selected view rather than paging through a data set. For example, if the user has selected the Day view, they will be able to navigate to the next/ previous day or any other day that they selected from the calendar in the Toolbar.

  • Gantt - the Tree section of the Gantt component is essentially a TreeList component that actually supports paging. However, the Gantt Tree is not intended to emulate all of TreeList functionalities, as they don't correspond to the feature set needed for a Gantt chart.  Since the Gantt represents a tree-like structure with parent and child tasks and their dependencies, pagination is not applicable.

In case paging is actually applicable for the specific scenario, you can of course consider integration of a Pager component.

Show more than one day

  • Scheduler - the Timeline indeed displays one day and to check the user activity in another day, one should navigate to that specific day. In a future version of the component, we will work on Timeline views that display more days - for example, Timeline Week, Timeline Month.

    In case you consider that useful for your case, you may vote for the request and follow it to get status updates.
  • Gantt - for the Gantt component you may organize the Tree data, so that the users are parent items and the records for their activity per day are added as child items. The Gantt will render separate tasks for the daily activity per user.

I hope you will find the above information useful to move forward with your application. In case you are facing any difficulties with the solution, please let me know - I can put you in touch with our Professional Services team who can assist with such complete implementation.

Last but not least, I will hereby mark this request as "Completed" since the desired scenario can be achieved with the current functionalities of the Scheduler and Gantt components.

Regards,


Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

n/a
Posted on: 02 Nov 2022 09:51

Also we need to show more than one day. Per example filter by user1 and then show one row/timeline  bar for each of the days in last week or month for that user.

With Scheduler timeline it is just one day.

n/a
Posted on: 27 Oct 2022 10:24

Thanks! The Scheduler timeline sample looks in the right direction. 

- Would be great if you add support to add custom columns like the "Time Worked" and the Custom Tooltips

- Also Tooltip so that you can mouse over a period of time and see more detail of the activity

- Also need paging


We are using Google Charts Timeline Timelines  |  Charts  |  Google Developers that allows this 

 

 

I will play with your sample and let you know if we missing something else.

 

Thanks!!

ADMIN
Nadezhda Tacheva
Posted on: 27 Oct 2022 09:16

Hi Alberto,

There are two components in UI for Blazor that have Timeline. Using one or the other has its pros and cons, see details below:

Gantt 

The Gantt component is a combination of a TreeList and Timeline. You can display the user details in separate columns of the TreeList and the record will be visualized in the Timeline section.

The upside of using this component is that you can render the user details in dedicated columns - for example, status, name, time worked. The downside is that the user will be visualized as a single div in the TimeLine, so you cannot divide it into sections to set different colors depending on your business logic. You can, however, use a customized Tooltip to display additional data for the users.

Scheduler

The scheduler component has Timeline view which delivers a similar look. You can create appointments for the activity and associate them with the desired resources (users). You can then group the appointments by their resources, so they appear divided depending on the users (use vertical orientation to achieve the desired layout.

In this scenario, the appointments are also rendered as whole containers, so they can not be divided. However, you can render separate appointments for the activity options and then style them as needed using the OnItemRender event of the component.

Additionally, you can remove the border radius, so they look as a whole bar, The result will be something like this: https://blazorrepl.telerik.com/cwFEcLkZ05MsRQ8736.

The downside of using the Scheduler is that you cannot have additional columns for the user to display their status or time worked. However, we have a request for Resource Grouping Header Template - once available, it will allow you to add custom content to the group header. If interested you may vote for the request and follow it - we keep track on the gathered community votes in order to prioritize the requests.

Please take your time to revise and test the suggested options and let me know your thoughts afterwards. Would you say any of these components is a good fit for your scenario? Is there any functionality missing that we can consider? Have you seen the desired behavior as a built-in functionality in any competitor products? If yes, please share a demo in which we could revise and evaluate the functionality.

Thank you in advance! I am looking forward to hearing from you!

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

n/a
Posted on: 27 Oct 2022 09:14
what info do you need?