In the TelerikDatePicker, when I select the date and click outside, the event triggers one time only, but when I do the same inside the TelerikDateTimePicker it triggers two times (the first when I set the time and the second when I click outside).
In the end of the ticket I will provide a simple demo code used in Telerik REPL for Blazor comparing the behaviour between the two elements.
Additionally I would like to report the fact that in the TelerikDateTimePicker, when there's no value and I open the calendar and click "Set" without doing anything else, the DateTime is set to "01/01/0001 00:00" instead of null.
Hi,
starting with version 6.0, dialogs used together with loading indicator are at wrong z-index order.
- None of hotfixes with "delay" helped.
- users are stucked and cant confirm anything
How to replicate
Click on "Show Confirm with loading indicator". Loading animation should be at BACK of confirm dialog(as at older versions, prior 6.0)
https://blazorrepl.telerik.com/GeOfQMkt56AMkdof43
I just spent hours trying to understand why my grid did not work and threw a "source can't be null" exception at me when I set data to a 100% initialized - not null - list of a struct type.. Eventually I figured that the struct was the problem and turning it into a class fixed it, but that was just by chance.
Please for the sake of developer sanity give this a proper check.
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.
We would like to see all the Blazor controls support the ability to show the time in the browser's local time as a feature that can be enabled. It should support converted from both UTC and server time.
A question on how to do this has been asked at least twice on the forums:
- https://www.telerik.com/forums/using-client-side-time-zone-for-time-columns-in-blazor-server-grid
- https://www.telerik.com/forums/utc-datetimes-as-local-datetimes-and-vice-versa
Some examples of how other's have implemented this as a control can be founde here:
- https://www.meziantou.net/convert-datetime-to-user-s-time-zone-with-server-side-blazor-time-provider.htm
- https://github.com/dustout/BlazorTime
Thanks
The https://feedback.telerik.com/blazor/1517344-filter-text-is-cleared-when-you-select-an-item ticket fixed a good usability issue with multiselect. Unfortunately, it creates a bug I ran into while starting to update my applications MultiSelects.
If you have PersistFilterOnSelect=true property set, but not AutoClose=false what happens is the user types '2' to filter the selection, selects something with the mouse and the drop down closes, but the filter doesn't clear so when next trying to select an item the old filter is still there, although it's not showing. The only way to clear the ghost filter seems to be to start typing a new thing to filter on and then backspace that which finally removes the ghost.
The docs kind of mention this with "To keep the filter upon selection, set the PersistFilterOnSelect parameter to true. It only applies when Filterable="true" and AutoClose="false"" but the ghost filter staying is clearly a bug. You can test this behaviour with a repl I made. Click the multiselect active, type for.ex. '2' and select an item with the mouse, the item is selected, the dropdown closed and the filter vanishes. Now click the multiselect again, the dropdown is already filtered as if '2' had been pressed, but it's not visible and can't be cleared without typing a new filter
Below is a screenshot where I typed 22 as the filter, selected Item 22 and then clicked the MultiSelect again
Reproduceable example: https://blazorrepl.telerik.com/wSEgunbK46sVmd1p02
In my use case, I have custom components that wrap each of the telerik date controls (date picker, time picker, etc). They each expose a SelectedDate/SelectedTime/etc. bindable property. The SelectedDate is populated when the telerik control in my component (like TelerikDatePicker) fires OnChange. I use this instead of ValueChanged to avoid too many UI updates while the user selects a value in the UI, such as when typing. The OnChange event fires when the date input loses focus, but if the date input didn't have focus when the clear button is clicked, it never loses foucs and never fires OnChange. Let me know if this isn't intended to be supported and I should just be using ValueChanged instead, but to me OnChange would imply it would fire in all cases when the value can also change through ValueChanged, just less often.
Steps to reproduce (I used a TelerikDatePicker in the code above but I could reproduce this locally with date time picker and time picker - it's related to the underlying DateInput):
- Enter a date into the date picker, either through typing or using the calendar popup
- Cause the date picker to lose focus by clicking away
- Click the clear button
- Notice that the date is cleared from the UI control, but it doesn't call OnChange, so the date on the page never updates
When I discovered this locally, clicking the clear button would not clear the date visually from the date input as well as not updating the actual date variable. In the REPL, I was not able to replicate this - the date clears visually in the UI.
See below repl
https://blazorrepl.telerik.com/GeYodYvp135zJH7N22
The first dropdown is populated correctly, it is not in a FormItem or Template
The second one, populated in the same way but inside a FormItem context does not show the data, it only redraws and shows data when entering another control i.e. the other working dropdown.
This was previously working when the application was using .net 6 and Telerik 3.6.1
It has since been updated to .net 8 and Telerik 5.1.1
What is the correct way to populate this?
Can you provide more information?
Thanks.
Currently using Telerik.DataSource.QueryableExtensions.CreateDataSourceResult() results in queryable.Count() + queryable.Skip(...).Take(...). done seperatelly. EF Core specific tests are already present it seems, based on decompiled code, I can see: "if (!sort.Any() && queryable.Provider.IsEntityFrameworkProvider())".
Request: Add support for other ORM's that are more capable than EF Core. In case of pagination, window-function could be used to save from extra count query. A short sample bellow:
var dbResults = await queryable
.Select(x => new {
Item = x,
TotalCount = Sql.Ext.Count().Over().ToValue()
})
.Skip(() => offset)
.Take(() => limit)
.ToListAsync();
var count = dbResults.FirstOrDefault()?.TotalCount ?? 0;
var items = dbResults.Select(x => x.Item);Read more about Window functions: https://statics.teams.cdn.office.net/evergreen-assets/safelinks/1/atp-safelinks.html
Hi,
it seems that grid.GetState() and FilterDescriptors, contains +1 "dummy" object.
- If it is by design, ok, BUT then, how to bind this filter descriptor to the ie TelerikFilter? = It displays that dummy object as it is, and confusing end users. Or how to "identify 100%" that is some kind of dummy value to be trashed?
How to reproduce:
1 run the repl demo
2 put "a" into the first colum(Name) filter
3 click button and observe the content of filter descriptors(serialized below the grid - RED is wrong, Green is expected as ok)
similar, but not the same(iam came from here):
Thanks for the tip, clarification, or removing that redundant values.
On grids with a lot of data there is a delay between when the grid is assigned the data to when the grid shows the data. During this UI painting period, the NoDataTemplate is displayed for a second or two.
The grid should not show the NoDataTemplate unless the data source is loaded with an empty collection, not just while it is still trying to show the data.
Note: Having a generic message like in the documentation "No Data available / The data is still loading ..." is not satisfying our users. (Blazor Grid - No Data Template - Telerik UI for Blazor) These should really be two different states that can show different messages.
Thanks
Horizontal scrolling in the grid works when its width is set to a fixed value (px, rem, etc.). But the h scroll disappear when a percentage is assigned to the width of the grid.
This seems to be a known 'feature' to Telerik:
A sensible behaviour is to have the horizontal scrolling enabled and at the same time being able to set the grid to percentage width.
Hi,
I have a little problem with changing the LoadGroupsOnDemand value. Depending on the data in my grid, I set this value to true or false. When updating grid data requires changing the LoadGroupsOnDemand value, I can't do it this way:
LoadGroupsOnDemand = true;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());This code throws me an exception.
I need to do something like this to make it work:
LoadGroupsOnDemand = true;
GridRef.LoadGroupsOnDemand = LoadGroupsOnDemand;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());This is the code that is executed in onclick. After OnRead is executed, the exception is thrown.
Let me know if you need more information.
When trying to use autocomplete, it falls short of what I would like to have. I presumed this to be on feature parity with MudBlazor offerings.
What I used before with mudautocomplete: label, value, style, reset value on empty text, coerce text, to string func, search func, required, required error, value changed, virtualize, max items. The way I use autocomplete box, is that user searches against a list of hundreds of thousands of elements, component querys against method, get's filtered reply that is displayed. When chosen, it binds the guid value, not the string. User also cannot submit their own option, only one from provided list.
Telerik autocomplete box does not provide those features, what other workarounds are there besides running with Mudblazor for time being?
Greetings,
When using single selection mode, a row can be selected either by clicking the checkbox or by clicking on the rest of the row. There is no difference at all. Now, let's say I have a grid with multiple selection mode enabled, e.g.:
<TelerikGrid Data="listOfFoos" SelectionMode="GridSelectionMode.Multiple">
<GridColumns>
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All" />
<GridColumn Field="@nameof(Foo.Name)" Title="Name" />
</GridColumns>
</TelerikGrid>public class Foo {
public string Name { get; set; }
}
public List<Foo> listOfFoos = [ new Foo{Name="First"}, new Foo{Name="Second"}, new Foo{Name="Third"} ];
When we click an unselected row, the behavior varies depending on where we click exactly:
- if we click on the checkbox of the unselected row, the unselected row becomes selected. Previously selected rows are still selected. Everything is fine.
- if we click on the unselected row but not on the checkbox (e.g. on another column), the unselected row becomes selected but previously selected rows are unselected.
This notably makes multiple selection impossible if we click on the row but not on the checkbox and gives the impression we are using single selection mode. It is especially strange if we consider the existence of the CheckBoxOnlySelection parameter of <GridCheckboxColumn> whose name suggests we can select using the rest of the row by default.
How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.
---
ADMIN EDIT
You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.
You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.
Here is an example that shows how you can trigger the tooltip to show for a particular target:
@inject IJSRuntime _js
<script suppress-error="BL9992">
function triggerTooltip(index, selector, showOnClick) {
var targets = document.querySelectorAll(selector);
if (targets && targets.length >= index) {
var desiredTarget = targets[index];//feel free to get the desired target in any other way
setTimeout(function () {
var evt = document.createEvent('MouseEvent');
var evtToSimulate = showOnClick ? "click" : "mouseenter";
evt.initEvent(evtToSimulate, true, false);
desiredTarget.dispatchEvent(evt);
}, 20);
}
}
</script>
<TelerikButton OnClick="@( async () => await TriggerTooltip(0) )">Trigger tooltip for the first target</TelerikButton>
<TelerikButton OnClick="@( async () => await TriggerTooltip(1) )">Trigger tooltip for the SECOND target</TelerikButton>
<TelerikTooltip TargetSelector="@ttipTargetSelector" ShowOn="@ShowOnSetting">
</TelerikTooltip>
<p id="my-targets">
<strong title="what is 'lorem ipsum'?">lorem</strong>
ipsum dolor
<strong title="is this a real word?">sit</strong>
amet.
</p>
@code{
string ttipTargetSelector = "p#my-targets [title]";
TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
async Task TriggerTooltip(int targetIndex)
{
await _js.InvokeVoidAsync("triggerTooltip",
targetIndex,
ttipTargetSelector,
ShowOnSetting == TooltipShowEvent.Click ? true : false
);
}
}---
--- FOR FUTURE REQUEST ---
Could be very useful to scrolling tha grid to a specific item\row (in Normal Grd and also in Virtual Grid mode, both) programmatically. Whithout javascript.
For example after loading a grid that show 20 items, programmatically is it possible to go (and display in grid) not the first 20 rows but for example at row 100. So the vertical scrolling bar muso go dow sice arriving and show that row.
Best Regards
Paolo Leonesi
Greetings,
I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:
<TelerikTextBox>
<TextBoxPrefixTemplate>
First name
</TextBoxPrefixTemplate>
</TelerikTextBox>Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.
You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.
The OnRowClick event of the TelerikGrid is only triggered when clicking the row with the left mouse button as discussed on the following forum post:
https://www.telerik.com/forums/grid-onrowclick-event-for-middle-mouse-button-click
Please add support to the OnRowClick event to trigger it for a middle mouse button click (and pass the mouse button clicked in the eventargs) or add a separate OnRowClick event that is triggered on middle mouse button click.