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 want to add more fields to the scheduler create/edit popup. Currently, this is possible by creating a custom edit form. However, this customization would be easier if the Scheduler exposed a Popup Form Template similar to the Grid.
===
ADMIN EDIT
===
A necessary prerequisite for exposing this is to first add a State feature in the Scheduler. This will allow programmatic control over the edited item.
The appointments at the start of the day seem accurate. If you scroll down, the position of the appointments does not line up with the grid line for the hour that it starts at or ends at. The issue can be observed in the live demo.
I am trying to look at the times 7pm - midnight. But if I set the end time to midnight, I get an error that the end time has to be greater than the start time. How do I set the timeline to show 7pm - midnight or 8pm - 2am?
I tried including the next date in the EndTime but the Scheduler does not take the date into consideration, it checks only the time portion.
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)
If the Start and End match exactly, the rendering of the Scheduler breaks in Day view. If another view is used, the event looks as if it is rendered on the previous day.
===
ADMIN EDIT
===
A possible workaround for the time being is to use a custom edit form and implement some kind of validation that prevents the user from selecting the same value for the Start and End of an event.