Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:

- Scroll to a selected row

- Scroll to a record, based on its Id

-Scroll to the top of the Grid when the user adds a new item

- Scroll to an expanded item in hierarchical Grid

=====ADMIN EDIT======

We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.

Hello there,

I am looking for the ability to display hierarchical data in the grid control similar to that available in the asp.net core grid: https://demos.telerik.com/aspnet-core/grid/hierarchy

Thanks!

Currently the blazor grid must be a specific, static height.  If one is not provided, the grid uses a default of 500px.

Kendo grid implementations in other UI frameworks allow for more flexibility in the height of the grid.  It would be great if the blazor implementation could support this as well. 

Two specific scenarios that are valueable:

1) Grid height adjusts to accomodate all of the items in the grid

For other kendo grid implementations, this is typically the case when "Scrollable" is set to false.   If there is a plan to allow toggling scrolling for the blazor grid, then I think that this would come along with that.

2) Ability to set grid height to 100%

With other kendo implementations this is normally done via CSS, and is useful for when you want a "full screen" grid.  This is normally combined with "Scrollable=true" and often combined with Pagination="true" as well.   Currently it's not possible to do this - since the height is defined on the k-grid element, it cannot be overridden with CSS.

Hello,

I want to have the TelerikGrid's "Add" command display a popup for the new record's details, in the same way that the "Edit" functionality does. However with:

        <TelerikGrid EditMode="popup">
            <TelerikGridToolBar>
                <TelerikGridCommandButton Command="Add" Icon="add">Add</TelerikGridCommandButton>

When I click "Add", the new blank row is shown within the grid identical to EditMode="inline", not as a popup. Is the "Add" functionality meant to work in popup mode?

Please allow to set Group By fields at Design time, currently only user has control to Drag and drop to group.

we need feature to group by fixed set of columns and don't allow user to change the grouping, also need option to hide group collapse icons.

I have a simple Grid with custom detail template

    <Telerik.Blazor.Components.TelerikGrid Data="@GridData" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" >

        <GridColumns>
            <Telerik.Blazor.Components.GridCheckboxColumn Title="Selected"></Telerik.Blazor.Components.GridCheckboxColumn>
            <Telerik.Blazor.Components.GridColumn Title="Name" Filterable="true" Field="@nameof(GridItem.Text)"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Date)" Filterable="true" Title="Date"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Id)" Filterable="true" Title="Id"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.ParentIdValue)" Filterable="true" Title="Parent Id"></Telerik.Blazor.Components.GridColumn>
            <Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.HasChildren)" Filterable="true" Title="Has Children"></Telerik.Blazor.Components.GridColumn>
        </GridColumns>

        <DetailTemplate>
            <div>Custom Template</div>
        </DetailTemplate>

    </Telerik.Blazor.Components.TelerikGrid>

And here is what it looks like. Filters are moved one column to the left. When I remove DetailTemplate everything is ok.

I am using EF on my backend and when I group I get an error like this one:

Unhandled exception rendering component: Processing of the LINQ expression '(GroupByShaperExpression:
      KeySelector: (t.FirstName), 
      ElementSelector:(EntityShaperExpression: 
          EntityType: Customer
          ValueBufferExpression: 
              (ProjectionBindingExpression: EmptyProjectionMember)
          IsNullable: False
      )
      )' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
System.InvalidOperationException: Processing of the LINQ expression '(GroupByShaperExpression:
KeySelector: (t.FirstName), 
ElementSelector:(EntityShaperExpression: 
    EntityType: Customer
    ValueBufferExpression: 
        (ProjectionBindingExpression: EmptyProjectionMember)
    IsNullable: False
)
)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
   at Microsoft.EntityFrameworkCore.Query.Internal.RelationalProjectionBindingExpressionVisitor.VisitExtension(Expression extensionExpression)
   at System.Linq.Expressions.Expression.Accept(ExpressionVisitor visitor)

and a lot more line through the EF Core expression classes.

-----

ADMIN EDIT

    protected override void OnInitialized()
    {
        GridData = ProductService.GetProducts().ToList();
    }

----

On initialization of the Grid the oDataString is correct, but when I apply a Filter (through the FilterMenu) or apply a sort to a Grid column the ToODataString extension method throws with null reference exception. If the FilterMode is set to FilterRow or revert back to 2.16.0 everything works as expected. 

<AdminEdit>

This bug extends to the functionality of the FilterMenu as a feature and is not connected only to the ToODataString();

</AdminEdit>

It would be really nice now that we have a grid loader, to be able to customize this using a custom template.

Currently it fixes even the animation type, so while we have chosen a different enum (Pulsing) for all our loaders, our grids now look different because it is not possible currently to change the grid loader beyond turning it on and off.

When the Grid has a non-grouped column at first position, there is a missing left border in an adjacent cell on the second line of the header area.

First reported in:

https://www.telerik.com/forums/multi-column-line-in-grid-occasionally-missing

Possible workarounds:

• Move the non-grouped column to another position.
• Wrap the non-grouped column in its own group.

Test page to reproduce:

(Uncomment the group column to use the second workaround from above.)

<TelerikGrid Data="@Data">
    <GridColumns>
        @*<GridColumn Title="Title">
        <Columns>*@
            <GridColumn Field="ID" />
        @*</Columns>
        </GridColumn>*@
        <GridColumn Title="Group">
            <Columns>
                <GridColumn Field="Name" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {

    public List<GridItem> Data { get; set; } = new List<GridItem>() {
        new GridItem() { ID = 1, Name = "Name 1" }
    };

    public class GridItem
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

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

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.

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.