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

Steps to reproduce:

1. Open this edited Telerik REPL link, the original link came from TreeView - CheckBoxes, and I only changed "CheckedItems = Data.Skip(1).Take(2)" to "CheckedItems = Data.Skip(1).Take(4)".
2. Run

Expected: Both the parent "Documents" and its 4 children should be checked.

Actual: Only the 4 children are checked; the parent remains unchecked.

This only happens when all children are checked. However, if not all children items are checked, the parent will also be checked.

Hi, I just came accross a bug in the TelerikStepper.

I try to create a custom version that switches to a custom success icon after a step is completed.
It contains the following codesnippets:

<TelerikStepper Linear="true" ValueChanged="@HandleValueChanged">
    <StepperSteps>
        @for (int i = 0; i < IsValidArray.Length; i++)
        {
            <StepperStep Valid="@IsValidArray[i]"></StepperStep>
        }
    </StepperSteps>
</TelerikStepper>

@code {
    bool?[] IsValidArray = [null, null, null, null];

    public void HandleValueChanged(int index)
    {
        for (int i = 0; i < IsValidArray.Length; i++)
        {
            IsValidArray[i] = index > i ? true : null;
        }
    }
}

Forward it works like expected:

When moving backwards it behaves strange:

Except if you are debugging (Visual Studio debugger), then everything works as expected:

Same thing can be achived when not debugging but clicking on the step a second time

It would be good to have a Grid parameter like "ExpandDetailsOnSelection" for the Grid:

-> When the user selects a row, the DetailTemplate automatically expands - the DetailTemplate of the previous selected item is automatically collapsed

Advantages:

- no "+" button needed

- easy to integrate for 2-way-binding on SelectedItems (no need to use GridState and RowClick event)

The described functionality listed on https://demos.telerik.com/blazor-ui/window/stacking-windows

"The Telerik Window component for Blazor provides stacking z-index functionality that brings to front the component any time it receives focus."

doesn't appear to be working in the demo. When the one window receives focus the z-index does not change.  This appears to not work correctly in the demo either. 

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.

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):

https://feedback.telerik.com/blazor/1606424-manually-setting-the-grid-filters-via-the-grid-state-causes-multiple-composite-filters-on-one-column-where-only-one-filter-descriptor-for-that-member-was-set

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:

https://docs.telerik.com/blazor-ui/components/grid/columns/width?_gl=1*78gyue*_ga*MzUzNTU3NTM0LjE2ODU2MTc3Njk.*_ga_9JSNBCSF54*MTcxMjIyMTAxNS44My4xLjE3MTIyMjExMzQuOS4wLjA.*_gcl_au*MTA3OTA1NzUyOS4xNzEwNTE1Njgy&_ga=2.263164300.1038437897.1712221016-353557534.1685617769

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.