The idea of the feature is to be able to customize the list of FilterOperators displayed in the list of the FilterRow and FilterMenu.

FilterRow UI element

FilterMenu UI element

How can I get the tooltips for validation of each field displayed at the corresponding field in a Grid Popup form, not just the summary below the Form, etc?

---

ADMIN EDIT

---

This will be handled through exposing an option to set your preferred field validation message type - tooltip or inline. It will cover all edit modes (Popup, Inline, InCell).

If you want to remove the ValidationSummary after adding field validation messages, check the ability to remove ValidationSummary from the Popup edit form.

----

ADMIN EDIT

The Excel export seems to honor it, so it can be used as a workaround.

Reproducible with the workaround commented out:

<TelerikButton OnClick="@CurrentPage">Current Page</TelerikButton>
<TelerikButton OnClick="@AllPages">All Pages</TelerikButton>

<TelerikGrid Data="@GridData"
             @ref="@GridRef"
             Pageable="true"
             Sortable="true"
             Resizable="true"
             Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Groupable="true">



    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    async Task AllPages()
    {
        ExportAllPages = true;

        await Task.Delay(20); // allow the component to rerender with the new parameter

        await GridRef.SaveAsCsvFileAsync();

        //await GridRef.SaveAsExcelFileAsync(); // this works
    }

    async Task CurrentPage()
    {
        ExportAllPages = false;

        await Task.Delay(20); // allow the component to rerender with the new parameter

        await GridRef.SaveAsCsvFileAsync();

        //await GridRef.SaveAsExcelFileAsync(); // this works
    }


    private TelerikGrid<SampleData> GridRef { get; set; }


    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

Here is the scenario:

• UI for Blazor version 2.30
• Grid with InCell editing
• EditorTemplate with a DropDownList inside

In version 2.30 there is no longer need for an explicit blur handler for the in-cell editor template. The editor template closes automatically when the user selects a value from the DropDownList. However, the new value is ignored.

REPL test page: https://blazorrepl.telerik.com/mFbcmQvs16Lf1jwv18

I have a filterable DropDownList in a Grid EditorTemplate. The edit mode is InCell.

When the user opens the dropdown, the edited cell closes immediately with an OnUpdate call. The DropDownList value can be changed only with the keyboard or if I disable DropDownList filtering.

===

The same problem occurs with any component that uses a popup and the popup can gain focus - ComboBox, ColorPicker, etc.

If a Grid with ColumnVirtualization enabled is programmatically resized at runtime, some of its cells appear empty. 

The same behavior will occur after column resizing. It looks like it is not accordingly updated as if a scroll horizontally, it updates and the missing data is rendered.

===

Edit: Here is a workaround for the column resizing scenario. Part of this approach can be used to workaround Grid resizing as well -

Use the OnStateChanged event simulate horizontal scrolling inside the Grid after column resize. The custom Grid CSS class is optional, if there are pages with multiple Grids.

Razor

<TelerikGrid Class="virtual-grid"
  OnStateChanged="@( (GridStateEventArgs<GridModel> args) => OnGridStateChanged(args) )" />

C#

    async Task OnGridStateChanged(GridStateEventArgs<User> args)
    {
        if (args.PropertyName == "ColumnStates")
        {
            await js.InvokeVoidAsync("loadColumns", "virtual-grid");
        }
    }

JavaScript

function loadColumns(gridClass) {
    var rowContainer = document.querySelector("." + gridClass + " .k-grid-content");
    if (rowContainer) {
        rowContainer.scrollLeft += 1;
        rowContainer.scrollLeft -= 1;
    }
}

When a user clicks outside of the edited input in the same cell, the cell remains in edit mode. The problem occurs in the 2.30.0 version.

You can see this behavior in the Incell Editing demo.

Documentation states that Grid supports Virtualization with Grouping if it is done by loading the Groups on-demand.

See:

On page: Blazor Grid - Load Group Data On Demand | Telerik UI for Blazor

From this, it appears that Virtual Scrolling, Group Load on Demand, and pagination of the results should function as expected.  I'm specifically focusing on the section where it says "load on demand for the data when the user expands a group or when they scroll to need a new set of available groups".

The behavior I am seeing in my Telerik Repl is not matching up with that.

See:  https://blazorrepl.telerik.com/QFbmurvT41eZq6Ld34

In the repl, I have added some Console.WriteLines to see when OnRead is actually called, as well as to log out some other information about the OnRead Request.  It can be seen that no pagination information is included in the request (PageSize = 0, Skip = 0) while the PageSize is set on the actual Grid component (PageSize = 20).

As a result, all groups are loaded initially, which will be problematic if my server-side data set is being grouped on a value that will result in thousands/millions of groups.

It is possible that I missed something in the documentation that would enable the expected behavior (the Grid actually giving me PageSize and Skip so pagination will actually work), but it is also equally possible that this was never intended behavior, and I have been misled by the documentation page.

Please support Display(Order = ...) with autogenerated Grid columns.

Such functionality will also be useful for controlling the order of manually declared columns when using a custom component for reusable columns. For example: https://blazorrepl.telerik.com/cGOtbwOX21f6zQcy35 - the "Name" column is rendered last and currently one cannot control its order.

public class DateModel
{
  [Display(Order = 2)]
  public string Id { get; set; }
  [Display(Order = 1)]
  public string Text { get; set; }
}

I am using Dutch culture and the following issue occurs when resizing - the edit button jumps to the end and back again.

Here is the problem or bug I would like you to look at: If the percent entry component that is in the test application is not in an EditorTemplate, then the OnFocusOut event will fire in Firefox when the Tab or Enter keys is pressed. When the component is within an EditorTemplate, the OnFocusOut event does not fire in Firefox for the Tab/Enter key. This leads me to believe that it is a bug in the Grid and Treelist that is blocking that event from firing in Firefox.

Steps to reproduce:

1. Run the attached project in Firefox.
2. Change one value in percent and press Tab
3. Open the same page in Chrome and repeat

---------------------ADMIN EDIT---------------------

There is one way you can use here to avoid manipulating the onfocusout event to handle percentage input. You can create in your model two properties/values. One value for visualization, with a custom format to represent percentage. Another value to pass along to the business logic, that has the actual fraction. You can see a reference to the described approach in this REPL link.