I have created a custom model where I added an ExpandoObject and a couple properties to it. The Grid seems to render the data successfully but the data operations are not possible - the nested properties are treated as invalid. Please add support for nested ExpandoObject properties in custom models.

---

ADMIN EDIT

---

For the time being, there is a workaround that you may try. Use the ExpandoObject directly, do not nest it in the custom model - bind the Grid Data to a collection of ExpandoObject and populate its properties in the OnInitialized.

@using System.Dynamic

<TelerikGrid Data="@Data" 
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             EditMode="@GridEditMode.Incell"
             Resizable="true" Reorderable="true">
        <GridColumns>
            <GridColumn Field="Id" FieldType="typeof(string)" Width="120px" />
            <GridColumn Field="DetailData.PropertyInt" Title="Column A" FieldType="@typeof(int)"  />
            <GridColumn Field="DetailData.ProptertyString" Title="Column B" FieldType="@typeof(string)"/>
            <GridColumn Field="DetailData.PropertyDate" Title="Column C" FieldType="@typeof(DateTime)"/>
        </GridColumns>
</TelerikGrid>


@code {
    public ExpandoObject[] Data { get; set; } = Array.Empty<ExpandoObject>();

    protected override async Task OnInitializedAsync()
    {
        Data = new ExpandoObject[]
            {
            GetPopulatedExpando(1),
            GetPopulatedExpando(2),
            GetPopulatedExpando(3),
            GetPopulatedExpando(4),
            GetPopulatedExpando(5),
            };
    }

    private ExpandoObject GetPopulatedExpando(int id)
    {
        dynamic expando = new ExpandoObject();
        expando.Id = id;
        dynamic nested = new ExpandoObject();
        nested.PropertyInt = id;
        nested.ProptertyString = "ID " + id;
        nested.PropertyDate = new DateTime(2022, 4, id);
        expando.DetailData = nested;

        return expando;
    }
}

Hello,

Currently the Id and Field properties of GridColumnState in the GridState do not have setters. As a result, these properties are not deserialized, e.g. when sending GridState information from the client to the server in WebAssembly apps.

I would like to determine the existing columns in the Grid and tailor the database request, so that the fetched data includes only the required columns.

Another possible use case is detecting outdated GridState information in localStorage, after the app has been updated and the Grid contains different columns.

Similar to the WPF grid I would like the option to require the user hold shift to sort by multiple columns, otherwise the grid would sort by only a single column.

https://docs.telerik.com/devtools/wpf/controls/radgridview/sorting/multiple-column-sorting

When the Grid is databound via OnRead event, the initially displayed aggregates are wrong and take into account the first page only.

A possible workaround is to bind the Grid in OnAfterRenderAsync -

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             Pageable="true">
    <GridAggregates>
        <GridAggregate Field="@nameof(Product.Name)" Aggregate="@GridAggregateType.Count" FieldType="@(typeof(System.String))" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name">
            <FooterTemplate>
                @context.Count
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Price)" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
        <GridColumn Field="@nameof(Product.Active)" />
    </GridColumns>
</TelerikGrid>

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

    bool ShouldBindGrid { get; set; }

    async Task OnGridRead(GridReadEventArgs args)
    {
        if (!ShouldBindGrid)
        {
            return;
        }

        await Task.Delay(200); // simulate network delay

        DataSourceResult result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // workaround for initial Grid aggregates
            ShouldBindGrid = true;
            GridRef.Rebind();
            StateHasChanged();
        }
    }

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

        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                Active = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool Active { get; set; }
    }
}

Currently, the Grid doesn't display its built-in loading animation on initial data (page) load.

The OnRead handler is now completely decoupled with the Data parameter, so the limitation can be removed at least for OnRead scenarios.

When using the Filter Menu inside the Column Menu filter value is reset if Rebind is called. For reference, if using FIlter Row or a standalone Filter Menu value is not reset upon invoking Rebind.

Reproduction: https://blazorrepl.telerik.com/mdOJYHas48vPCPUv47.

I want to filter a Grid by DateTimeOffset? field

===ADMIN EDIT===

There are two possible options:

1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.

REPL example that demonstrates this approach. 

2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type. 

REPL example that demonstrates this approach. 

At the moment the numeric and date filters keep the filter button visible even on narrow columns. This must be implemented for the string filter as well - it has a set width at the moment.

The "clear filter" button must always be visible as well (when there is a filter applied, of course).

Ideally, the filter elements will also have a common container with an accessible class so, for example, you can set its max-width to 50% or 100px to match desired UI easily without hacking through several different layouts and selectors.

It is a common request to show grids in alternating colors, rather than simply white and grey.  Because the Grid component generates the <tr> element, we are left with manually setting each <td> element.  A tedious but effective solution.

The feature I would like to request is to add 2 new tags to the <TelerikGrid> component, call them EvenRowClass, and OddRowClass.  The behavior is the same as the Class tag, but they operate on Even and Odd numbered rows of data, respectively.  Their values would be added to the <tr> element as <tr class="MyEvenClass"> or <tr class="MyOddClass" in the same manner class k-alt is generated or not.  This would provide a simple yet extensible mechanism to achieve custom alternating row colors in a Grid.

The GridCheckboxColumn for the Blazor Grid is simply confusing.

I think 99 % of the users assume the GridCheckboxColumn is intended to be used for boolean field types.

Functionality is very nice but naming could be e.g. "GridSelectionColumn" to clarify what's it's purpose.

We are using Grid control with OData source (ToODataString() exstension) and OnRead event. When we try to group by some column, it douesn't work. OData query to API is same and OnRead event fires but grid not grouping.

Example Repo - https://github.com/benhysell/BlazorGridPagingIssue

tldr - OnRead args do not contain the correct page after restoring state without manual intervention.

Project Setup

• Base Blazor Client/Server template with Weather Forecasts as the data
• Server has a single OData endpoint to return 50 weather forecasts.  Each forecast starts with Temperature 0 and adds 1 per row to allow one to know which page they should be on
• Client has two pages configured, 'Paging NOT Working' and 'Paging Work Around'

Steps to Reproduce

• Navigate to 'Page NOT Working', select a page, i.e. page 5, navigate to the Counter page, navigate back to Page NOT Working.
• Grid will show Page 5 in the page selector, however the data being show in from Page 1
• Looking at Chrome 'Network' tab the OData query to obtain data from the backend does not contain proper offset for Page 5 data
• args.Request.Page reports Page 1, however the state of the Grid was just restored to Page 5

Workaround

I currently have a work around, this can be seen in the other page 'Paging Work Around'.

• On the first call to OnRead I check to see the last Grid state that was stored
• If the arg.GridState.Page does not match, (Stored vs the Request) I update the Request with the proper Page
• Proper OData query is generated to the backend.

Expected Behavior

• After state is restored first call to OnRead() would report the proper Page and make correct OData call.

Using the Excel Export for Grid creates the Excel file, but on opening it, the columns that contain data are hidden. Unless I unhide the columns, the sprceadsheet looks empty.

---
ADMIN EDIT:
One idea to go about this is to expose an event that would allow users to modify the column width values before they get sent for export. The benefit of this approach is that if the columns are resized, the user will receive their current size in the specified unit e.g. rem, em or % and will be able to set the width in px.

Another idea is to default such column widths to some hardcoded value (say, 64px) or even the grid might try to calculate them (which can cause questionable results in stranger settings, but it is an idea - if an event gets exposed you will be able to do that in your application code).

---

Grid - Import from Clipboard (Excel) when column name matches the first row header

I think it would be a great feature to be able to import copied data from excel into the grid either based on the index of the column or the header row in the clipboard matches the name of the column in Blazor Grid.

---

ADMIN EDIT

You can find an example of implementing this and the caveats it brings in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/paste-from-excel

This feature requires research on how we could provide it as a built-in feature. So, any feedback on the matter will be appreciated.

---