<TelerikGrid Data="@GridData"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             SelectionMode="@GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedItems">
    <GridColumns>
        <GridCheckboxColumn Width="35px"/>
         <GridColumn Field="@(nameof(Data.Name))" />
     </GridColumns>
 </TelerikGrid>

@code{

    public class Data
    {
        public string Name { get; set; }
    }

    public List<Data> GridData { get; set; }
    public IEnumerable<Data> SelectedItems { get; set; }
    protected override void OnInitialized()
    {
        GridData = new List<Data>();
        SelectedItems = new List<Data>();
        GridData.Add(new Data{Name="abc"});
        GridData.Add(new Data{Name="abe"});
        GridData.Add(new Data{Name="xyz"});
    }
}

1. Filter the above grid by "abc" (the filtered grid will display "abc" correctly as the only entry)

2. Click into the "SelectAll" Checkbox (SelectedItems will wrongly contain "abc" AND "abe" !!!)

3. Click on "ClearFilter" Button --> the grid will display both "abc" and "abe" as selected !!!

It might be an indexing problem because the "SelectAll" Logic always seems to ignore the last character of the search string while the filtering of the display takes all characters into account.

This bug has cost be many hours and stomach pain!  Please let me know, if this will be fixed soon.  If not I will have to implement my own filtering (which makes me wonder why I'm using Telerik UI).

Hi,

I'm trying to set an empty column title

 <Telerik.Blazor.Components.GridColumn Field="@item.FieldName"
                                       Title=""
                                       Resizable="true"
                                       Width="@width">

I would expect it to show an empty header title but instead fieldName is displayed.

If you create a second Grid on the page, it will clear the SearchBox input value of the first Grid.

<p><TelerikButton OnClick="@ToggleSecondGrid">Toggle Second Grid</TelerikButton></p>

<TelerikGrid Data="@GridData">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    </GridColumns>
</TelerikGrid>

@if (ShowSecondGrid)
{
    <TelerikGrid Data="@( new List<Product>() )">
        <GridColumns>
            <GridColumn />
        </GridColumns>
    </TelerikGrid>
}

@code {
    List<Product> GridData { get; set; }

    bool ShowSecondGrid { get; set; }

    async Task ToggleSecondGrid()
    {
        ShowSecondGrid = !ShowSecondGrid;
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product " + i.ToString(),
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
                Discontinued = false
            });
        }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
    }
}

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; }
    }
}

---

Hi,

how to select ALL items in the grid data source using GridCheckboxColumn in the grid header when grid is in Virtual scroll mode?
When I click on the GridCheckboxColumn in the grid header it selects only the items in the current visible page but I would like to select all items in the grid data source.

Selecting all items in the grid (not only visible ones) is a must have feature and current behavoiur is kind of misleading because the user would expect that all items are selected.

ADMIN EDIT: This has been available since 2.10.0 through the SelectAllMode parameter of the selection column.

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: ;">

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.

I want to place the Pager on top of the Grid. I know it can be handled with a Pager component integration in the Grid Toolbar, but I want to use the Toolbar for other purposes/actions. Please allow control over the Pager position.

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

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

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.