The Custom Filter Menu in the Grid is not working as I would expect.

I am trying to do two things

1. Apply filters programmatically through the Grid State
2. Populate a custom Filter Menu with values that exist in that column

I am doing something very similar to the demo for the custom filter menu: https://demos.telerik.com/blazor-ui/grid/custom-filter-menu

I have observed that if I set a filter programatically through the grid state, those filters are applied to the grid but are not being passed through the FilterMenuTemplateContext object in the FilterMenuTemplate when I open the Filter Menu for that column.  Therefore, I cannot update my custom filter to show which values are currently being filtered on.

Is it by design that the FilterMenuTemplateContext does not contain Filters applied through the grid state or a bug?

---

ADMIN EDIT

As of Dec 2020, there is one outstanding issue - using complex filters (having a CompositeFilterDescriptor) for the FilterRow filter template gets saved in the grid state, but is not loaded as expected - the filter row uses a "regular" FilterDescriptor and cuts off additional descriptors. Thus, the context of the template does not provide all the data from the grid state and you need to extract it manually. I have attached a sample that shows one way of doing that in the StateInit handler.

The FilterMenu already provides all the data in its context and you can bind inputs in the template directly to the filter descriptors. Once the filter row can work with more complex filter descriptors as well, you would be able to create the extra descriptors (if they are not already there) and directly bind the inputs to their value, as opposed to the current approach where view-model fields are used.

---

Reproducible:

https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes 

I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.

=====

Admin Edit

With 2.22.0, the InCell editing mode was revamped to provide better user experience and this alters the way it worked. In the common case, there will no longer be double OnUpdate calls (unless explicit application logic invokes them). With 2.23.0, Tab and Enter keys that bubble from editor templates will be handled by the grid like they are handled for the built-in editors.

This means that this issue is, effectively, solved. You can see the Notes section about editor templates to see how you can also handle the OnBlur event to capture mouse clicks outside of the component so that you can save changes and remove the edited item. See the full notes here (the Event Sequence section was heavily revamped for clarity) and here on editor template behavior.

Thus, the previous ides about  Save and Cancel methods on the edit context might not be implemented, which will also be one breaking change that we could avoid:

After discussion with the development team, the proposed resolution is to provide a context that provides Save/Cancel operations. The goal is to provide easier configuration for IncellEditing and EditorTemplates and consistent behavior with mouse and keyboard interaction. However, the change will introduce a breaking change in our EditorTemplate, should be researched further and that is why this is logged as a feature request.

=====

By the following steps, the problem occurs:

1. Click on line number 1 to focus the row
2. Press the Down-Key 19 times to navigate to line 20
3. Try to navigate to line 21 via the Down-Key
4. -> No navigation possible via keyboard to the lines below
5. Try to navigate backwards via Up-Key to line 1
6. -> Navigation stops at line 15

So, it not possible to navigate through the whole grid with virtualized rows when Navigable=true





@* Scroll the grid instead of paging *@

<TelerikGrid Data=@GridData
             ScrollMode="@GridScrollMode.Virtual" Navigable="true"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireData" Width="200px">
            <Template>
                @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 1000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Error:

Example:

private string SerializedState; private void OnStateInitHandler(GridStateEventArgs<SampleData> args) { args.GridState = JsonSerializer.Deserialize<GridState<SampleData>>(SerializedState); }

Reason:

FilterDescriptors property MemberType = null.

Note:

Method TelerikGrid.SetState() works correctly.

---

ADMIN EDIT

Attached to this post are a reproducible and a workaround - setting the state in OnAfterRenderAsync with a small delay, so the initial grid render happens, then it can re-render and take the filters into account.

---

When I switch the culture of my App from English to Swedish, the Virtual scrolling feature of the Grid breaks. 

===========

ADMIN EDIT

===========

The issue stems from invalid transform style applied to the k-virtual-position div element in Swedish culture. Due to integer to string conversion that takes culture into consideration when setting the style and/or data-translate attribute, when this number is < 0, the negative sign is longer dash for Swedish culture. This longer dash is not parsable by JS and CSS which is why the translateY transform is invalid.

As a workaround for the time being, you can try adding transform style for the k-virtual-position div, so you can override the default one and the correct dash will be applied: 

<style>
    .k-virtual-position {
        transform: translateY(-1080px);
    }
</style>

Grid virtual scrolling will freeze in the following scenario:

1. Open https://demos.telerik.com/blazor-ui/grid/virtual-scrolling
2. Scroll to the lower part of the Grid
3. Filter any column, so that the number of items becomes less than the current scroll position
4. The Grid will show "no records to display" and row placeholders, even if there are items to display

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

In the case of a sorted column, NVDA is not narrating the correct column name and narrating the incorrect Roles for the column headers.

In the case of an unsorted column, NVDA is narrating the column name twice and repeating the information.

Hello there,

I am looking for the ability to display hierarchical data in the grid control similar to that available in the asp.net core grid: https://demos.telerik.com/aspnet-core/grid/hierarchy

Thanks!

Currently the blazor grid must be a specific, static height.  If one is not provided, the grid uses a default of 500px.

Kendo grid implementations in other UI frameworks allow for more flexibility in the height of the grid.  It would be great if the blazor implementation could support this as well. 

Two specific scenarios that are valueable:

1) Grid height adjusts to accomodate all of the items in the grid

For other kendo grid implementations, this is typically the case when "Scrollable" is set to false.   If there is a plan to allow toggling scrolling for the blazor grid, then I think that this would come along with that.

2) Ability to set grid height to 100%

With other kendo implementations this is normally done via CSS, and is useful for when you want a "full screen" grid.  This is normally combined with "Scrollable=true" and often combined with Pagination="true" as well.   Currently it's not possible to do this - since the height is defined on the k-grid element, it cannot be overridden with CSS.

Hello,

I want to have the TelerikGrid's "Add" command display a popup for the new record's details, in the same way that the "Edit" functionality does. However with:

        <TelerikGrid EditMode="popup">
            <TelerikGridToolBar>
                <TelerikGridCommandButton Command="Add" Icon="add">Add</TelerikGridCommandButton>

When I click "Add", the new blank row is shown within the grid identical to EditMode="inline", not as a popup. Is the "Add" functionality meant to work in popup mode?

Please allow to set Group By fields at Design time, currently only user has control to Drag and drop to group.

we need feature to group by fixed set of columns and don't allow user to change the grouping, also need option to hide group collapse icons.

I have a simple Grid with custom detail template

    <Telerik.Blazor.Components.TelerikGrid Data="@GridData" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" >

        <GridColumns>
            <Telerik.Blazor.Components.GridCheckboxColumn Title="Selected"></Telerik.Blazor.Components.GridCheckboxColumn>
            <Telerik.Blazor.Components.GridColumn Title="Name" Filterable="true" Field="@nameof(GridItem.Text)"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Date)" Filterable="true" Title="Date"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Id)" Filterable="true" Title="Id"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.ParentIdValue)" Filterable="true" Title="Parent Id"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.HasChildren)" Filterable="true" Title="Has Children"></Telerik.Blazor.Components.GridColumn>
        </GridColumns>

        <DetailTemplate>
            <div>Custom Template</div>
        </DetailTemplate>

    </Telerik.Blazor.Components.TelerikGrid>

And here is what it looks like. Filters are moved one column to the left. When I remove DetailTemplate everything is ok.