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

When Grid is nested in a Window, pressing Escape key will bubble to the Window causing it to close during edit operation of the Grid.

1. Go to https://blazorrepl.telerik.com/mQaUcSlP59yrfqmM16 
2. Trigger Grid's keyboard navigation.
3. Press Escape(whether it is to close an Editor, or not).
4. Observe Window will close.

Navigable="true" + OnRead data binding allow the user to go beyond the last Grid page. The component shows no rows, and even though the user can return to previous pages, it's cumbersome.

The workaround is to manage the Page value manually in the PageChanged handler.

@using Telerik.DataSource.Extensions

@*  workaround:  *@

@*Page="@GridPage"
PageChanged="@OnGridPageChanged"*@

<TelerikGrid OnRead="@OnGridRead"
             Navigable="true"
             TItem="@Product"
             Pageable="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Product> GridData { get; set; }
    int GridPage { get; set; } = 1;
    int GridTotal { get; set; }

    // workaround
    void OnGridPageChanged(int newPage)
    {
        if (newPage > 0 && newPage <= Math.Ceiling((double)GridTotal / (double)10))
        {
            GridPage = newPage;
        }
    }

    void OnGridRead(GridReadEventArgs args)
    {
        var result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;

        // workaround
        //GridTotal = result.Total;
    }

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

        for (int i = 1; i <= 12; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i.ToString()
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Key events will allow developers to enhance and customize the Grid keyboard navigation. For example -

Detect when the user presses the down-arrow key when on the last grid row. We want to force a "next page" when they do this, and a "previous page" if they are at the top of the grid and press the up-arrow key.

---

ADMIT EDIT

Everyone, please feel free to list other scenarios as well.

• the Grid is initially rendered without columns
• I am using OnInitializedAsync

Here is a runnable REPL test page. A possible workaround is to render the Grid only if it has columns:

@{
    if (GridColumns.Count() > 0)
    {
        <TelerikGrid Data="@Data">
            <GridColumns>
                @foreach (var column in GridColumns)
                    {
                    <GridColumn Field="@column.DataField"
                                ShowColumnMenu="false" Title="@column.DisplayName" Resizable="true" Width="500px">
                        <FooterTemplate>
                            foo
                        </FooterTemplate>
                    </GridColumn>
                    }
            </GridColumns>
        </TelerikGrid>
    }
}

When working with grid column templates, it would be incredibly helpful if you could filter by the content of the cell itself rather than be restricted to a field that is a part of the model. Considering that the main use case of a template is to display something in a different format from how it appears on the model I think it's fair to say that most users would then expect to be able to filter the text they see rather than some value behind the scenes.

This has been problematic for example when trying to show data from a separate object by joining on a common ID value via the template. I understand one option would be to create a separate view model for the purposes of the grid but that potentially adds additional complexity to a project just to add some basic text filtering.

One workaround I've implemented for now is to use the OnRead event to manually filter the initial collection of data for my templated columns. I use a dictionary to map id values to my desired display text and then filter using LINQ. This is workable but again adds a lot of extra steps for something that would ideally be much simpler.

Thanks,

Kevin

   So what I propose is a fixed width for a column of the grid (and locked) with the remaining columns auto-sizing.

In my situation, I have an action switch button where the client can delete a row, edit a row etc but the action code dropdown column needs to ALWAYS be the same width.  The rest of the columns should automatically size based on the existing behaviour.

   Now I have tried using the autosize for just that column, but I have to render the grid first, then run the autosize (which gives a fun show of resizing to the user) then all the columns become fixed width, but the vertical scroll bar doesn't move and stays in its initial position.

This feature request is to provide an option to configure the displayed format of the editor for the GridColumn. It is essential for the numeric and date editing. An alternative would be to follow the DisplayFormat parameter and reuse it in the DatePickers and NumericTextBox. However, we need to gather feedback for the required functionality from our customers.

Scenario

Rendering the grid column like so:

<GridColumn Visible="true" Field="ScalePercent" Title="Scale Percent" DisplayFormat="{0:P5}" VisibleInColumnChooser="false" />

The data in the grid column will show the 5 decimal precision. However, when we go in edit mode the value in the NumericTextBox is restricted to two decimal places.

Workaround

1. Usage of templates

2. Generic change of globalization setting for the NumericTextBox

`culture.NumberFormat.NumberDecimalDigits`

Hi,

is it possible to implement grid attribute that would disable alternating row coloring altogether?
It would leave onHover settings as is.

It's causing us problems when we color rows using onRowRender to custom color a row based on some value in the record, but alternating css "jumps in" and overrides onRowRender.

See attached screenshot (all rows should be green), but alt are still dark-grey )instead of green.

This should me marked as feature or bug.

BR, Smiljan

Currently, the validation of the grid can be disabled altogether via the GridValidationSettings.Enabled option. However, we cannot control the validation of the grid per column.

Also, we cannot control when the validation is triggered. The simple inputs expose the ValidateOn option, but it cannot be set to the default editors of the grid without the need for an explicit declaration of a custom editor.

When filtering using a GridSearchBox - to filter across all columns, we have an issue where if you change a GridColumns Visible attribute to false that row will still be visible in the grid results even though it no longer matches the filter.

Take this snippet for example: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

1. Use Search box and search for a Name. e.g "Chang"

2. Click "Toggle Name Visibility" button

Expected: Since Name column is now hidden, the column should no longer be used in filter and the row should no longer be displayed. In reference to the GridSearchBox: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code where it's mentioned that the search box will filter only on columns that are visible. It doesnt seem to refresh the filter.

Actual: Row still displayed even though it no longer matches filter

Just wanting to raise this as an issue and also hoping you may know a potential work-around for this?

A potential work-around I have tried is re-applying the existing filter in the search box by following documentation here in the "Filter From Code" section: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code

While I am able to apply a filter from code I cannot seem to retrieve the value that is currently in the search box as I want to reuse it. How can I achieve this with a GridSearchBox? There doesnt seem to be a property available on the GridSearchBox component for binding it's value. Would I need to create a custom filter input to achieve this?

When a filter descriptor is created and the value is of type DateTime? (nullable DateTime) the serialized value is incorrect.

    DataSourceRequest request1 = new()
    {
         Filters = new[] {new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) {MemberType = typeof(DateTime)}},
         Sorts = new List<SortDescriptor>()
    };

    DataSourceRequest request2 = new()
    {
         Filters = new[] { new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) { MemberType = typeof(DateTime?) } },
         Sorts = new List<SortDescriptor>()
    };

    string query1 = request1.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12T00:00:00.0000000Z)&$skip=0
    string query2 = request2.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12%2000:00:00)&$skip=0

The exception is -

System.ArgumentNullException: Value cannot be null. (Parameter 'source')

Here is a test page, based on this one -

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@using System.IO

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
        <GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

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

    protected async Task ReadItems(GridReadEventArgs args)
    {
        DataEnvelope<Employee> result = await MyService.GetData(args.Request);

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();
        }
        else
        {
            args.Data = result.CurrentPageData.Cast<Employee>().ToList();
        }

        args.Total = result.TotalItemCount;

        if (args.Request.Groups.Count > 0)
        {
            try
            {
                List<AggregateFunctionsGroup> items = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();

                await using var s = new MemoryStream();
                await System.Text.Json.JsonSerializer.SerializeAsync(s, items);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
        }
    }

    void OnStateInitHandler(GridStateEventArgs<object> args)
    {
        // set initial grouping
        GridState<object> desiredState = new GridState<object>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
    {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                new GroupDescriptor()
                {
                    Member = "IsOnLeave",
                    MemberType = typeof(bool)
                }
            }
        };

        args.GridState = desiredState;
    }

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

    public class DataEnvelope<T>
    {
        public List<AggregateFunctionsGroup> GroupedData { get; set; }
        public List<T> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public static class MyService
    {
        private static List<Employee> SourceData { get; set; }
        public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
        {
            if (SourceData == null)
            {
                SourceData = new List<Employee>();
                var rand = new Random();
                for (int i = 1; i <= 2500; i++)
                {
                    SourceData.Add(new Employee()
                    {
                        EmployeeId = i,
                        Name = "Employee " + i.ToString(),
                        Team = "Team " + i % 100,
                        IsOnLeave = i % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
                }
            }

            await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app

            // retrieve data as needed, you can find more examples and runnable projects here
            // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
            var datasourceResult = SourceData.ToDataSourceResult(request);

            DataEnvelope<Employee> dataToReturn;

            if (request.Groups.Count > 0)
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }
            else
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }

            return await Task.FromResult(dataToReturn);
        }
    }
}

In hierarchical Grid with InCell edit the DateTime cells of the child Grid cannot be edited through the calendar popup. Trying to open the DatePicker or DateTimePicker popup of the child Grid automatically closes the edited cell.

If the Grid has no data, selecting null PageSize throws:

Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize') 

---

ADMIN EDIT

---

A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.

The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -

• ExportToExcelAsync
• ExportToCsvAsync
• SaveAsExcelFileAsync
• SaveAsCsvFileAsync

It will be useful to be able to customize the columns and data to be exported.

===

Telerik edit:

A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.

Grid headers are misaligned if they are navigated in a scrolling scenario with a Frozen column.

===

ADMIN EDIT

===

The behavior affects the TreeList as well in a similar fashion. The misalignment is bigger when there is a frozen column but it is also reproducible without it in this demo.

I am adding validation messages for the popup form fields and I do not want to display the ValidationSummary in addition to them. Please add option to remove it.

---

ADMIN EDIT

---

Built-in field validation messages will be exposed in future version of the product. Thus, you can add inline or tooltip validation messages to the Popup edit form without an EditorTemplate.

For the time being, you can remove the ValidationSummary with some CSS. Here is an example of hiding the ValidationSummary and adding inline ValidationMessage for the ProductName field: https://blazorrepl.telerik.com/cckycgPf37NZfy9J11