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.

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.

Hello,

after updating to the versin 4.6.0 from 4.5.0, almost all svg icons dissapeared(inside the grid). No erros, no console warnings.

Is there some breaking changes or aditional steps how to bring them back?

Original markup without changes(first blue button in example should have "play" icon at the beginning):

<TelerikButton OnClick="@(_ => OZRowCmd(null,20))" Icon="@FontIcon.Play" Title="Zahájit novou" Class="bg-primary" Size="@Telerik.Blazor.ThemeConstants.Button.Size.Large">Zahájit novou</TelerikButton>

Problem

It seems the Grid and GridSearchBox assume the search string by taking the value of GridState.SearchFilter.FilterDescriptors[0].Value and this is causing a few issues:

1. If the first filter is a CompositeFilterDescriptor, it causes an exception.
2. If there is no filter, the search box gets cleared.
3. If the first filter has a different value than what was typed (because filters were added/changed programmatically), the search box value will be changed.

Background

I am expanding grid search to include non-string columns, and I want this to apply by default across our entire application without having to update every grid individually or developers having to remember to opt in.

To search other type columns, I’ve largely taken the logic from Search Grid in numeric and date fields - Telerik UI for Blazor and it works well. However, that solution utilizes a custom search box component that I would have to add to each grid.

Instead, I have placed this filter creation logic in the OnStateChanged handler as exemplified in How to Search Grid Items with a StartsWith Filter Operator - Telerik UI for Blazor, as we already have a handler for this event that all grids utilize.

This has worked wonderfully except for the issues I’ve mentioned.

Issue #1 – CompositeFilterDescriptor causes exception

If the first filter is a CompositeFilterDescriptor, it causes an exception. Specifically:

Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
   at Telerik.Blazor.Components.Common.TableGridBase`2.LoadSearchFilter(IFilterDescriptor descriptor)
   at Telerik.Blazor.Components.TelerikGrid`1.SetStateInternal(GridState`1 state)
   at Telerik.Blazor.Components.TelerikGrid`1.<SetStateAsync>d__311.MoveNext()
   at Web.Pages.Grid.<OnStateChangedHandler>d__18.MoveNext() in C:\src\Web\Pages\Grid.razor:line 196

If there is another filter in the collection that is not a CompositeFilterDescriptor, I can work around this problem by moving it to the front of the list.

// Make sure first filter is not composite.
var nonCompositeFilter = newSearchFilter.FilterDescriptors.OfType<FilterDescriptor>().FirstOrDefault();
if (nonCompositeFilter is not null && newSearchFilter.FilterDescriptors[0] is CompositeFilterDescriptor)
{
    newSearchFilter.FilterDescriptors.Remove(nonCompositeFilter);
    newSearchFilter.FilterDescriptors.Insert(0, nonCompositeFilter);
}

However, if all filters are composite, the exception is unavoidable.

Issue #2 – Search box gets cleared

If the GridState.SearchFilter.FilterDescriptors collection is empty, the search box gets cleared. This is a problem when a user needs to type more characters for a filter to be created.

For example, let’s say you are only searching DateTime columns and using the logic from Search Grid in numeric and date fields - Telerik UI for Blazor. As you type, it checks to see if the input is an integer between 1000 and 2100. Until you type the fourth digit, it will not meet that condition thus will not add a filter. So if you begin by typing “2”, it searches and a filter will not be added yet. However, because there are no filters, it will clear the search box. You won’t be able to type out a full year value of “2023” unless you type fast enough to outpace the debounce delay.

Issue #3 – Search box gets changed

Using the same example as above but with an Enum column instead of a DateTime, begin typing text. If the text matches an enum name, a filter is added for the enum item’s underlying value. For example:

1. Type “e”.
2. The first enum item’s name matches “e”, so a filter is added for (int)item IsEqualTo 0.
3. The search box text is replaced with “0”.

Possible solutions?

1. Is there some sort of “dummy” filter descriptor I could add to the beginning of the FilterDescriptors collection? Like, it would contain the search string as the Value but it would always evaluate to true and never affect which records match?
2. I give in and create a custom search box component to hold the search string value separate from GridState, which would require me to update every current and future grid after all.
3. Telerik could add a SearchString property to the GridState separate from the SearchFilter so that any filter changes would not affect the search string. Or something.

Sample project attached.

Hello, 

as you can see in the provided example : https://blazorrepl.telerik.com/GwEsxPFc05zxpF2u01

i have set a filter for column Country on OnStateInitHandler event. However when  i try to clear the filter from the filtermenutemplate button , Check box has the previous value. But data are bound correctly.

Could you give me some advice?

Hi,

We ran into an issue with manual binding and selected items with Grid component. I used the 'WebApiFromServerApp' sample in 'grid\datasourcerequest-on-server' folder from Telerik's samples on GitHub.

To recreate the issue, modify 'GridWithService.razor' file in 'WebApiFromServerApp' project. I attached modified project.

To test the behavior: 

1. Select records with Id 2 and 3 from grid.
2. Navigate to another page and return back to the first one.
3. Despite selected items exist in the grid's 'SelectedItems', but they are not being shown. This is the first issue.
4. The second issue is you can still select them again! In that case they would be duplicated as selected items.

Thank you.

Hi,

When we use custom filters with FilterMenuTemplate in combination with setting filters programmatically, the filter value remains visible after using the 'delete' button.

Simplified example:

1. First we load a filter programmatically by the button, this works fine:
   
   
2. When user uses the Delete button, the grid state loses the FilterDescriptor and we get all the data as expected (also the filter icon loses the green color, as expected because no filter is active)
   
   
3. When user reopens the filter menu, the value which was loaded programmatically is still present, without being used as a filter:
   

Note: We have the same issue with a custom filter with a checkbox list and that code is based on the example of the filter menu template in the documentation.

Note 2: When we use the custom filters and the 'Delete' button without setting the filters programmatically, everything works fine.

It's like the 'Delete' button clears the FilterDescriptors in de Grid State (and we get the data we expect), but the FilterDescriptors in the FilterMenuTemplateContext aren't cleared.. But only when those are set programmatically.. (by setting the grid state).

I already tried to think of a workaround by hooking the OnStateChanged, but there the FilterDescriptors on the grid state are empty when the 'Delete' button is used. As expected, because we get the data we want.. But don't think I can access the FilterMenuTemplateContext there, to clear it as well..

----

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

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.

I have a blazor grid with a large number of columns which I would like to have the width of the page and a horizontal scrollbar to be able to scroll through all of the columns.

According the the documentation I have found (https://demos.telerik.com/blazor-ui/grid/scrolling), setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container.

Here is an example of a page containing a grid where I am experiencing this:

@page "/admin/users/manageusers"
@inherits ManageUsersBase


<h3>Manage Users</h3>

<WS7.Components.PDAuthorizeBase AllowedRoleIds="ManageAllUsers,ManageAssignedUsers" />
@if (this.Users == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="form-group">
        <label for="UserSearch" class="col-form-label">Search</label>
        <input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
    </div>


    <TelerikGrid Data="@FilteredUsers" TItem="WS7.Engine.Models.ViewModels.ManageUsersViewModel" Height="600px" Width="100%" Pageable="true" PageSize="40" Sortable="true" Groupable="false"
                 FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" OnEdit="EditUser" ScrollMode="@GridScrollMode.Scrollable">
        <GridToolBar>
            <GridCommandButton OnClick="(()=>AddUser())">
                <span class="oi oi-plus"></span> Add
            </GridCommandButton>
        </GridToolBar>
        <GridColumns>
            <GridCommandColumn Width="100px">
                <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>


            </GridCommandColumn>

            <GridColumn Field="UserName" Title="User Name" Width="500px" />
            <GridColumn Field="Email" Title="Email" Width="500px" />
            <GridColumn Field="FirstName" Title="First Name" Width="500px" />
            <GridColumn Field="LastName" Title="Last Name" Width="500px" />
            <GridColumn Field="AccountStatus" Title="Account Status" Width="500px">
                <Template>
                    @{
                        string toolTip;
                        WS7.Engine.Models.ViewModels.ManageUsersViewModel user = context as WS7.Engine.Models.ViewModels.ManageUsersViewModel;
                        toolTip = "Account Status: " + user.AccountStatus;
                        toolTip += Environment.NewLine + "Active: " + user.Active.ToString();
                        toolTip += Environment.NewLine + "Email Confirmed: " + user.EmailConfirmed.ToString();
                    }
                    <div class="badge badge-pill badge-info">
                        <span class="oi oi-info" data-toggle="tooltip" data-placement="top" title="@toolTip"></span>
                    </div>
                </Template>
            </GridColumn>

            @*<GridCommandColumn Width="90px">
                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                </GridCommandColumn>*@
        </GridColumns>
    </TelerikGrid>
}

---

ADMIN EDIT

You can find some more details on  the origin of the issue in the thread below and in the following Knowledge Base article, which also offers a few ideas for solutions to this browser behavior: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bootstrap-flex-width-issue

---

Hi, 

I am using a grid on a data structure that has nested properties inside. Previously, I was able to do this which worked fine: (notice the first 2 colums)

              <TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
                    <GridColumns>
                        <GridColumn Field=@nameof(PackedPart.Part.PartNo) Title="Part no" />
                        <GridColumn Field=@nameof(PackedPart.Part.PartDescription) Title="Description" />
                        <GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
                        <GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
                        <GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
                        <GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
                    </GridColumns>
                </TelerikGrid>

I recently upgraded to the latest version (Telerik.UI.for.Blazor (2.29.0) and noticed that the first 2 fields are no longer displaying. I fixed this, by specifying the field names as string values:

               <TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
                    <GridColumns>
                        <GridColumn Field="Part.PartNo" Title="Part no" />
                        <GridColumn Field="Part.PartDescription" Title="Description" />
                        <GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
                        <GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
                        <GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
                        <GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
                    </GridColumns>
                </TelerikGrid>

I have also tried using @nameof(Part.PartNo) but that didn't work either. Only providing nested properties as string values works. This should not be the intended behaviour i'm sure? 

regards,

Chris Nateghi

Hello, 

After just a sort operation, in the event handler of OnStateChanged event, the FilterDescriptors of GridStateEventArgs.GridState is not empty. 

Steps to reproduce : 

1) Implement Grid with OnStateChanged and OnRead : 

<TelerikGrid 
             OnStateChanged="@((GridStateEventArgs<IGetAgences_Agences_Items> args) => OnStateChangedHandler(args))"
             OnRead=@ReadItems

    async Task OnStateChangedHandler(GridStateEventArgs<IGetAgences_Agences_Items> args)
    {
        var filters = args.GridState.FilterDescriptors; // filters are not empty after just a sort opration
      
    }

    async Task ReadItems(GridReadEventArgs args)
    {

        this.LoadData()

        await InvokeAsync(StateHasChanged);
    }

2) Sort a column 

3) The OnStateChanged event is fire

4) In the OnStateChangedHandler,  the filters are not empty : 

Expected behaviors :

If no filters added, the filters of the GridState must be empty 

Thank's

Thomas

The new functionality to have the in-cell editing validate based on the model doesn't work with fluid validation. We use a custom component that integrates fluid validation with blazor which works fine for all controls including telerik input controls, but the built in validation for the grid editing doesn't seem to work with it.

Also there seems to be a bug with the validation using standard attribute validation. If the row you are working on has an existing record that does not validation properly, the in-cell editing will stop working once you go in to any cell and make a change. The edit mode on that cell will close as if everything updated ok, but after that, you will not be able to click into any cell to edit. While normally the data should already be valid, there can be scenarios where new validation rules are applied and existing records would become retroactively invalid.

Thanks,

Alan

I am having problems with grouping in TelerikGrid.

When I drag the column into the header for grouping, I get an error ArgumentNullException: Value cannot be null, apparently,  somewhere in TelerikGrid.SetProcessedGroups.

@page "/test"

<div>
    <TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu" 
                 ShowColumnMenu="true"
                 TotalCount="@TotalRowCount"
                 SelectionMode="GridSelectionMode.Single"
                 OnRead=@ReadData>
        <GridAggregates>
            <GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
        <GridColumns>
            <GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
                <GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>
</div>


@code {

    protected TelerikGrid<TestData> grid;
    protected List<TestData> GridData { get; set; }
    public int TotalRowCount { get; set; } = 0;
    public int Page { get; set; } = 1;
    public int PageSize { get; set; } = 10;

    protected async Task ReadData(GridReadEventArgs args)
    {
        await LoadData();
    }

    protected async Task LoadData()
    {
        GridData = await GetSampleData();
        TotalRowCount = 100;
    }

    protected async Task<List<TestData>> GetSampleData()
    {
        List<TestData> results = new List<TestData>();

        results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
        results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
        results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
        results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
        results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
        results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
        results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
        results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
        results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
        results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });

        await Task.Delay(1000); //simulate loading delay ...

        return results;
    }

    protected void ViewItem(GridCommandEventArgs args)
    {
        //navigate to edit view ...
    }

    public class TestData
    {
        public string Name { get; set; }
        public string Surname { get; set; }
        public string Department { get; set; }
    }
}

I am getting the following error:

This happens in Chrome and Edge, in Webassembly and Server-side blazor.

Am I doing something wrong?

Thanks for the help!

When you resize grid columns the column width does not follow the mouse. This occurs in your demo:

https://demos.telerik.com/blazor-ui/grid/column-resizing

Make a column wider or narrower and the column width does not stay in line with where the mouse is.

---

ADMIN EDIT

This is not a bug, but intended behavior. As web grid is not Excel. You can find more details in the original thread opened by Aditya with this question: https://www.telerik.com/forums/grid-checkboxlist-filter---auto-select-all-upon-entering-filter-criteria

---

This is related to Grid CheckBoxList Filter - https://demos.telerik.com/blazor-ui/grid/filter-checkboxlist

In Microsoft Excel, when we start typing in the Search box, the matching entries along with "Select All" are already checked. So upon typing the required criteria, the user just needs to select Ok button to view the filtered results.

In the case of Blazor Grid, the matching entries and Select All option are not checked automatically. So the user would need to do an additional action of checking "Select All". Please refer to the attached screenshots.

Is there a way to have "Select All" auto checked upon typing the filter criteria?

asynct Task ContextMenuClick(ContextMenuItem) {
  var state = Grid.GetState();
  state.FilterDescriptors.Add(new FilterDescriptor
  {
    Member = "Created",
    Operator = FilterOperator.IsEqualTo,
    Value = "Administrator"
  }); 
  await Grid.SetState(state);
}

How it should look like:

If in a grid columns are bound to integer values which shall be treated as enum values it can be done with the FieldType parameter.

Unfortunately the new FilterMenuType.CheckBoxList does not work as expected then.

With

<GridColumn Field="@(nameof(MyModel.MyPropertyId))"
                     FieldType="@(typeof(MyPropertyEnum))"
                     Title="MyProperty"
                     FilterMenuType="@FilterMenuType.CheckBoxList">

the filter shows Integers instead of Enum-Strings.

(With FilterMenuType.Menu the filter correctly treats the values as enums)

Regards,

René