The Timeline view currently does not provide the "Show business hours" option as in the other views.
Please add that for the Timeline view similar to the jQuery version of the component.
===
ADMIN EDIT
===
For the time being, you can achieve this functionality with a custom approach by programmatically setting the StartTime and EndTime of the view to equal the WorkDayStart and WorkDayEnd.
Here is a basic example: https://blazorrepl.telerik.com/QyEhvjbO07j1ZvID42.
Hi,
I'm building a Grid which contains a nested Grid in it's `<DetailTemplate/>`.
When I'm opening the details, the grid events fire, the data gets loaded correctly but the data doesn't show up in the UI. Using .NET 8 Blazor with Telerik UI for Blazor Version 6.0.2.
This is the grid containing the Grid (data here gets loaded correctly):
<TelerikGrid @ref="@_grid" TItem="ChecklistDetailModel" Pageable Page="@_settings.CurrentPageNumber" PageSize="@_settings.Limit" OnRead="@OnPageReadAsync" Width="100%" Height="100%">
<GridToolBarTemplate>
<LawAreaSelect SelectedLawAreaId="_settings.SelectedLawAreaId" SelectedCountryId="_settings.SelectedCountryId" OnLawAreaSelected="OnLawAreaSelected" Width="250px" />
<CountriesSelect Value="_settings.SelectedCountryId" OnChangeCallback="OnCountrySelected" Width="250px" />
<TelerikButton Icon="FontIcon.FileAdd" OnClick="OnCreateChecklistButtonClick" Title="@Localizer["ChecklistOverview.Create"]" />
</GridToolBarTemplate>
<GridColumns>
<GridColumn Title="ID" Width="50px">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.Id</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.LawArea"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.LawArea.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Country"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.Country.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Checklist.Revision"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
@if (model.RevisionName != null)
{
<span>@model.RevisionName</span>
}
else
{
<i>@Localizer["Data.Checklist.NoRevision"]</i>
}
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.ChecklistRevisionDate"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
@if (model.LastUpdated.HasValue)
{
<span>@model.LastUpdated.Value.ToShortDateString()</span>
}
else
{
<span>@model.CreatedDate.ToShortDateString()</span>
}
}
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditChecklistButtonClick" />
<GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnAssignChecklistButtonClick" />
</GridCommandColumn>
</GridColumns>
<DetailTemplate Context="checklist">
<CustomerChecklistGrid ChecklistId="checklist.Id" OnEditCustomerChecklistButtonClick="OnEditCustomerChecklistButtonClick" OnNavigateToCustomerChecklistButtonClick="OnNavigateToCustomerChecklistButtonClick" />
</DetailTemplate>
</TelerikGrid>This is the `CustomerChecklistGrid` code inserted into the DetailTemplate of the Grid above:
<TelerikGrid @ref="_grid" TItem="CustomerChecklistModel" Pageable Page="_settings.CurrentPageNumber" PageSize="_settings.Limit" OnRead="OnPageReadAsync">
<GridToolBarTemplate>
<CustomerSelect OnCustomerSelected="OnCustomerSelected" SelectedCustomerId="_settings.SelectedCustomerId" Width="250px" />
</GridToolBarTemplate>
<GridColumns>
<GridColumn Title="ID" Width="50px">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
<span>@model.Id</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Customer"]">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
<span>@model.Customer.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["ChecklistsOverview.CompletedOn"]">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
@if (model.CompletedOn.HasValue)
{
<span>@model.CompletedOn.Value.ToShortDateString()</span>
}
else
{
<i>@Localizer["ChecklistsOverview.NotCompleted"]</i>
}
}
</Template>
</GridColumn>
<GridCommandColumn Context="customerChecklist">
<GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditCustomerChecklistButtonClickAsync" />
@{
var model = customerChecklist as CustomerChecklistModel;
if (!model.CompletedOn.HasValue)
{
<GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnNavigateToCustomerChecklistButtonClickAsync" />
}
}
</GridCommandColumn>
</GridColumns>
</TelerikGrid>This is the backing C# code for the grid:
public partial class CustomerChecklistGrid
{
[Parameter] public int ChecklistId { get; set; }
[Parameter] public EventCallback<CustomerChecklistModel> OnEditCustomerChecklistButtonClick { get; set; }
[Parameter] public EventCallback<CustomerChecklistModel> OnNavigateToCustomerChecklistButtonClick { get; set; }
[Inject] public ICustomerChecklistService CustomerChecklistService { get; set; }
[Inject] public IStringLocalizer<SharedResources> Localizer { get; set; }
[CascadingParameter] public Routes App { get; set; }
private CustomerChecklistSettings _settings = new();
private PageResult<CustomerChecklistModel> _data = new();
private TelerikGrid<CustomerChecklistModel> _grid;
private async void OnPageReadAsync(GridReadEventArgs args)
{
var newOffset = args.Request.PageSize * (args.Request.Page - 1);
_settings.Offset = newOffset;
_settings.CurrentPageNumber = args.Request.Page;
var request = new CustomerChecklistRequestModel
{
Offset = _settings.Offset,
Limit = _settings.Limit,
ChecklistId = ChecklistId,
OrderBy = _settings.OrderBy,
IsCompleted = _settings.IsCompleted,
CustomerId = _settings.SelectedCustomerId
};
_data = await CustomerChecklistService.GetPageAsync(request);
args.Data = _data.Items;
args.Total = _data.Total;
StateHasChanged();
}
private void OnCustomerSelected(int customerId)
{
_settings.SelectedCustomerId = customerId;
_settings.CurrentPageNumber = 1;
_grid.Rebind();
}
private async Task OnEditCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
{
var customerChecklist = args.Item as CustomerChecklistModel;
if (OnEditCustomerChecklistButtonClick.HasDelegate)
{
await OnEditCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
}
}
private async Task OnNavigateToCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
{
var customerChecklist = args.Item as CustomerChecklistModel;
if (OnNavigateToCustomerChecklistButtonClick.HasDelegate)
{
await OnNavigateToCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
}
}
private sealed class CustomerChecklistSettings
{
public int Offset { get; set; }
public int Limit { get; set; } = 25;
public int CurrentPageNumber { get; set; } = 1;
public int? SelectedCustomerId { get; set; }
public bool? IsCompleted { get; set; }
public string OrderBy { get; set; } = "customer";
}
}This is a screenshot of the UI I'm seeing. I'm expecting data to show up in the inner grid, data gets loaded correctly (when debugging I see data is available), however no records are shown.
Hello,
I use the scheduler component with grouping ressources on a timeline view.
When there is only one ressource for the second group, there is no text showing on the view.
It works with 2 ressources.
I try over your demo and i have the same result.
https://blazorrepl.telerik.com/GyYAmBGE22N2CcIQ27
When I use 2 ressources it works.
Thank you
I want to be able to limit the Scheduler to a minimum and/or maximum date.
---
ADMIN EDIT
---
This request could be revised in two separate tracks:
- Min and Max parameters on component level regardless of the selected view
- Min and Max parameters for the separate views ( Day, Week, Month etc.)
Please share your thoughts on how you'd expect it to be implemented.
Hello!
After update to 2.27 there is a bug to scheduler with number of days and refresh.
You can check your live demo also:
In a Scheduler with vertical grouping, I am dynamically changing the displayed resources during runtime. It looks like displaying a longer resource name breaks the rendering.
The Scheduler does not recalculate the cell width when changing the resource list.
---
ADMIN EDIT
---
Possible workarounds:
- Force component rerendering when changing the resources list - dispose it and initialize it again using a flag and conditional rendering. Example: https://blazorrepl.telerik.com/wwuDGLvE42TUf5En09.
- Use CSS to set appropriate min-width to the resource cell, so it is wide enough to fit the longest name of the available resources. Example: https://blazorrepl.telerik.com/wmaDGhFY37t5pFj757.
I am really looking to try to do something like this in Blazor: ASP.NET MVC Scheduler Hierarchical Grouping Demo | Telerik UI for ASP.NET MVC
In MVC, this feature is implemented with the dataParentValueField.
Current behavior:
When I click on an empty slot in the Scheduler the Start and End DateTimePickers are set to the default value of a DateTime object - 1/1/0001.
Expected/Desired behavior:
When I click on an empty slot in the Scheduler, the Start and End DateTimePickers should be set to the start and end date and time of the clicked slot.
I am trying to create event series with the following RecurrenceRule:
RecurrenceRule = "FREQ=HOURLY; BYHOUR=8,9,10"
Based on the RFC5545 specification, this rule should create three events occurring every hour - at 8, 9 and 10 o'clock.
However, only one event is created for the day.
Event Popup Edit: Object of type 'Telerik.Blazor.Components.Scheduler.Models.Resource' cannot be converted to type 'System.String'.
When try to click on the Save button in an Event Scheduler Popup window, an error appears.crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.Scheduler.Models.Resource' cannot be converted to type 'System.String'.
System.ArgumentException: Object of type 'Telerik.Blazor.Components.Scheduler.Models.Resource' cannot be converted to type 'System.String'.
at System.RuntimeType.CheckValue(Object& value, ParameterCopyBackAction& copyBack, Binder binder, CultureInfo culture, BindingFlags invokeAttr)
at System.Reflection.MethodBase.CheckArguments(Span`1 copyOfParameters, IntPtr* byrefParameters, Span`1 shouldCopyBack, ReadOnlySpan`1 parameters, RuntimeType[] sigTypes, Binder binder, CultureInfo culture, BindingFlags invokeAttr)
at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
at System.Reflection.RuntimePropertyInfo.SetValue(Object obj, Object value, BindingFlags invokeAttr, Binder binder, Object[] index, CultureInfo culture)
at System.Reflection.PropertyInfo.SetValue(Object obj, Object value, Object[] index)
at System.Reflection.PropertyInfo.SetValue(Object obj, Object value)
at Telerik.Blazor.Extensions.ReflectionExtensions.SetPropertyValue(Object target, String propertyName, Object value)
at Telerik.Blazor.Components.TelerikScheduler`1.<OnFormSubmitButtonClick>d__323[[PGS50.Client.Pages.XTest.SchedulerAppointment, PGS50.Client, Version=0.5.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Our current implementation of the JQuery version of the scheduler uses custom views. I understand that custom views are going to be a difficult if not impossible task for Blazor rendering. The goal for our custom view is simple, we override the calculateDateRange function to supply an ordered date range that allows us to have a "TimelineTwoWorkWeekView", thus showing Monday-Friday then Monday-Friday again. We also had a use case that was never implemented but would be addressed the same way; to show all "mondays this month".
Therefore, the request is a "TimelineCollectionView", displaying a timeline view for dates specified in an IEnumerable<DateTime>.
Any other ideas or feedback would be greatly appreciated.
The edit popup currently does not adapt to screen size changes. Part of the edit window for the scheduler is off the screen making it unreadable on certain resolutions.
I need to make it responsive/adaptive.
If I change the width of the scheduler component it doesn't move the events to the correct place
I am currentl looking at printing the Scheduler but I ran into this issue when trying to adjust the scheduler to fit on a page
When the Week view of the Scheduler is selected the label of the DatePicker is incorrect. The displayed range in the label covers an extra day. e.g. in the Week view the range spans 7 days (the label show range of 8 days)
The problem can also be observed when the MultiDay view is selected - the displayed range includes one additional day.
