I'd like to have a data virtualization feature (similar to the OnRead event), so I can load only small chunks of data (appointments) specifically for the current page/view.
===
ADMIN EDIT
===
Currently, you can achieve similar functionality by handling the DateChanged and ViewChanged events of the Scheduler to load only the relevant appointments for the selected period.
You can find an example here: Load Scheduler Appointments on Demand.
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.
Support the recurrence rule to create multiple appointments per time slot. Examples of such rules are:
FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR,SA,SU;BYHOUR=08,09,10,11,12,13,14,15,16;BYMINUTE=50