Here is the scenario and how to reproduce the issue:

1. A Grid with a horizontal scrollbar. All columns have explicit widths, according to requirements.
2. The first 3 columns are locked (frozen).
3. Make the frozen columns 1 - 3 smaller. Save the Grid state.
4. Refresh the page and restore the Grid state in OnStateInit.
5. Scroll the non-frozen columns to see how the frozen columns are positioned, according to their previous larger widths. Now there are gaps between these columns.
6. The reverse issue occurs if the frozen columns are expanded in (3). Then, after state restore they overlap.

The Locked column content is misplaced, it is not matching the column header and that breaks the layout of the other columns as well.

When you scroll to right, the Locked column should stick to the leftmost side of the Grid . However, at some point its content is even missing.

I want to use a multi-checkbox filter with ExpandoObject in Grid.

It looks like the built-in validation does not respect clearing the edit item through state.  If you remove invalid edit item through Grid State, the Grid stays in edit mode and the OnRowClick stops firing.

The case is similar when you try to clear an invalid InsertedItem through the Grid State - the Grid probably stays in Insert mode and some events are not firing (for example CUD events).

Irrespective of the grid 'grouping' technique (manual or via AutoStateInit), the <NoDataTemplate> is not displaying correctly.

All other grids that are not using Grouped columns all format correctly (when no results available).

If a Grid column is bound to a nullable bool field and some of the data source records have null values for that field they are not displayed, the Grid cells appear empty.

It would be nice if the Grid displays some text for the null values, for example just "null".

We are getting a problem with grid functionality after upgrading from 2.25 to 2.26. I have attached a test project. To see the problem:

• Run the attached solution
• Click on the "Tree List" menu item
• You will then see a grid at the top of the page
• On the first row, click into the text cell under "Column 2" (to the right)
• Now click into the next cell over at "Column 3"
• Now click again into that same cell
• You get the crash

We did not have this problem before version 2.26.

Just another note on this.

It appears that the presence of the checkbox columns causes the problem. Removing the checkbox columns causes the grid to work fine. Just having one checkbox template column in the grid causes the strange crash behavior in 2.26. Before 2.26, we had no problems with the checkbox templates impacting behavior.

Hi,

Is it possible to use ENTER key to validate a popup filter ? instead of mouse.

Use a shortcut to open filter pop of focused column (cell). Ctrl+F or Ctrl+F3...

Yours,

Currently, when you open a ColumnMenu, to expand its SubMenus (for example, Filter, Column chooser) you need to additionally click on the corresponding button.

I'd like to have these SubMenus initially expanded when the ColumnMenu is opened.

In Grid with Filter Menu, I want to trigger the Filter button on Enter press while the focus is still on the filter input.

Currently, it is possible to fire filtering from keyboard only if you tab through the Filter Menu elements to focus the Filter button and then press Enter.

I noticed Telerik Blazor grid is rendered into two tables. One for the headers and one for the contents.

My assumption is that Allyable Scan expects to find a th element inside the second table and it did not find any. Is my assumption correct? 

Element source:

<table role="grid" style="width: ;">

In Grid with MultiColumnHeaders, if you programmatically change a column header, this breaks the Grid rendering. The header text isn't updated unless the number of child columns changes.

Reproduction steps:

1. Run the provided code snippet. It will bind August's data to the grid. There are 5 days in August's data, so you can see 5 child columns under "Sales by Date".

2. Click the July button. July's data also has 5 days. You will see all the cell texts are updated, but the header texts aren't.

3. If you click on the July button again. They are updated at this time.

4. Refresh the page

5. Click the June button. June's data has only 3 days, so you will see all the header texts, and the cell texts are updated as expected.

Reproduction code:

<TelerikButton OnClick="@Change0">August</TelerikButton>
<TelerikButton OnClick="@Change">July</TelerikButton>
<TelerikButton OnClick="@Change2">June</TelerikButton>

@if (AllSales.Count > 0)
{
    <TelerikGrid @ref="@Grid" Data="@AllSales" Pageable="false">
        <GridColumns>
            <GridColumn Field="@nameof(MyViewModel.Product)">
            </GridColumn>
            <GridColumn>
                <HeaderTemplate>
                    <div>Sales by Date</div>
                </HeaderTemplate>
                <Columns>
                    @{
                        var dates = AllSales.First().SalesByDate.Keys.OrderByDescending(d => d).ToList();
                        foreach (var date in dates)
                        {
                            <GridColumn Title="@date.ToString("MM/dd")">
                                <HeaderTemplate>
                                    @{
                                        Console.WriteLine(date.ToString("MM/dd"));
                                        <div>@date.ToString("MM/dd")</div>
                                    }
                                </HeaderTemplate>
                                <Template>
                                    @{
                                        var record = context as MyViewModel;
                                        if (record.SalesByDate.ContainsKey(date))
                                        {
                                            <div>@record.SalesByDate[date]</div>
                                        }
                                    }
                                </Template>
                            </GridColumn>
                        }
                    }
                </Columns>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>
}

@code {

    public class MyViewModel
    {
        public string Product { get; set; }
        public Dictionary<DateTime, decimal> SalesByDate { get; set; }
    }

    List<MyViewModel> AllSales { get; set; } = new List<MyViewModel>();
    TelerikGrid<MyViewModel> Grid { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        Change0();
    }

    protected void Change0()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product A",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,08,01), 1000 },
                { new DateTime(2021,08,02), 2000 },
                { new DateTime(2021,08,03), 3000 },
                { new DateTime(2021,08,04), 4000 },
                { new DateTime(2021,08,05), 5000 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product B",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,08,01), 1000 },
                { new DateTime(2021,08,02), 2000 },
                { new DateTime(2021,08,03), 3000 },
                { new DateTime(2021,08,04), 4000 },
                { new DateTime(2021,08,05), 5000 }
            }
        });
    }

    protected void Change()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product C",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,07,01), 1010 },
                { new DateTime(2021,07,02), 2020 },
                { new DateTime(2021,07,03), 3030 },
                { new DateTime(2021,07,04), 4040 },
                { new DateTime(2021,07,05), 5050 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product D",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,07,01), 1010 },
                { new DateTime(2021,07,02), 2020 },
                { new DateTime(2021,07,03), 3030 },
                { new DateTime(2021,07,04), 4040 },
                { new DateTime(2021,07,05), 5050 }
            }
        });
    }

    protected void Change2()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product E",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,06,01), 1100 },
                { new DateTime(2021,06,02), 2200 },
                { new DateTime(2021,06,03), 3300 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product F",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,06,01), 1100 },
                { new DateTime(2021,06,02), 2200 },
                { new DateTime(2021,06,03), 3300 },
            }
        });
    }
}

I have the foreign key issue that is described here:

https://docs.telerik.com/blazor-ui/knowledge-base/grids-foreign-key 

I am working with your grid and trying to implement the filter template. I am using the sample code on this page under the section Filter Menu Template:

https://docs.telerik.com/blazor-ui/components/grid/templates/filter 

For the text to display I want to use a List of objects that have 2 properties: an id and a text to display.

I have used the grouping header template and the editor template successfully with the foreign key.


My issue with the filter template is as follows:

1. Run the attached project

2. drop down the list

3. select one item

4. press Filter  (this works fine)

5. drop down the list

6. unselect the selected field

7. press Filter  (this does not work – the list is still filtered)

When using the TelerikCheckBoxListFilter component in a FilterMenuTemplate, it does render a checkbox with a blank label, but selecting it does not generate a filter descriptor.

For reference, the built-in CheckBoxList filtering correctly filters null values.

I would like to set increase the searchbox width with a parameter.

---

ADMIN EDIT

Here is a CSS workaround:

<style>
    .custom-searchbox-width .k-grid-search {
        width: 50%;
    }
</style>

<TelerikGrid Data=@GridData Pageable="true" Height="400px" Class="custom-searchbox-width">
    <GridToolBar>
        <span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" />
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
        <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

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

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

---

Hello,

The Grid header and data cells become misaligned if the user changes the page zoom level. The right padding of the Grid header area resizes, according to the zoom level, but the scrollbar width remains the same. This triggers the misalignment.

The problem disappears after browser refresh at the current zoom level.

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.