Column headers and column data do not match after reordering. 

See this example: https://blazorrepl.telerik.com/GKkFcwlF54CvZoVp34 

1. Reorder Group 1 and Group 2.

2. The column headers within these 2 groups are not reordered with their parent.

Reordering should work according to the rules specified in the documentation: https://www.telerik.com/blazor-ui/documentation/components/grid/columns/multi-column-headers#reordering

Hello,

 there is inconsistency/behaviour/order in events of the Grid: OnStateInit and OnRead. Which leads to scenario with no clear sollution and would be nice to fix it, and how to solve it as "hotfix".
Also i think its not new in 12.x. release, it exists longer ;)

<TelerikGrid TItem="GData" @ref="gHL" OnRead=@GReadItems OnStateInit="@OnStateGHL">
...
<GridAggregates>
@if(1==2){...}
</GridAggregates>
@code{
protected async Task GReadItems(GridReadEventArgs args)
{
	**hack for C)
	if(gHL==null)return;//state init AVOID 2x call gread PRIOR OnStateInit
...// must be called:
args.AggregateResults = rr.ToDataSourceResult(args.Request).AggregateResults;
...
}
void OnStateGHL(GridStateEventArgs<GData> args) //or async Task doesnt matter
{
//default SORTing:args.GridState = new GridState<GData>
	{
		SortDescriptors = new List<Telerik.DataSource.SortDescriptor>
	{
		new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.DatPorizeni), SortDirection = Telerik.DataSource.ListSortDirection.Descending },
		//new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.Skupina), SortDirection = Telerik.DataSource.ListSortDirection.Ascending }

	}
	};
}
}
	

Problematic scenarios, single page, same grid:

A) when NO aggregates markup EXISTS at all
1. OnStateInit
2. OnRead  - gHL IS NULL
=OK

B) when EMPTY aggregates markup EXISTS
1. OnRead
2. OnStateInit
=FAIL
HOW to read and ui data with correct STATE?
https://www.telerik.com/blazor-ui/documentation/components/grid/state

cannot call gHL.rebind, also gHL is null
NONE initinal "sorting,filtering etc" is set, WRONG data,columns,displayed to the user


C) when SOME real aggregates markup EXISTS
1. OnRead
2. OnStateInit
3. OnRead
=partial FAIL("**hack used"), but managed by if(gHL==null)return


D) "hotfix" used with  GridAggregates="@( HasAggregates ? GridAggregatesTemplate : null )"
act as A or C, but gHL is always null, which is also bad againts C)

Expected:
ALWAYS only A) - First 1.OnStateInit THEN 2.OnRead. its the best one, without any additional hacks = UNIFY the event orders and behaviour.
OR
A) or C)
everything else is unmanagable.
 Especially when initial sorting "is must" and aggregates,columns and so on, are managed by user(non static)
B) is completly WRONG: incorrect event order of OnStateInit and OnRead
D) is againts C) (cannot detect reference of gHL)

related to:
https://feedback.telerik.com/blazor/1654029-onstateinit-does-not-fire-if-gridaggregates-exists-but-is-empty

https://www.telerik.com/forums/grid-onstateinit-event-and-onread-event-chaos

OR how to solve it generally = what is the way to LOAD gridState, and after that, LOAD Data by defined GridState?

Thanks

1. User clicks the sparkled button that opens the AI window in this demo: https://demos.telerik.com/blazor-ui/grid/ai-data-operations

2. User chooses a predefined prompt suggestion, enters one via the keyboard, or uses voice access to dictate one, and clicks apply.  The operation runs successfully and returns output.

3. Now the user clicks the sparkled button again, and the AI window opens. Once open, the prompt text box fills with the previously entered request text.

How to remove or prevent the previously entered request text from filling the text box on every sequential opening of the AI window?

When triggering Grid edit mode through the Grid state and the component is using adaptive mode, the edit form doesn't show.

Possible workarounds include:

• Trigger edit mode through built-in buttons in the Grid command column on in the Grid toolbar.
• Use inline or in-cell editing.
• Use a custom edit form in a separate Window component that fills the entire viewport.

The Grid in-cell editor will not close if the user selects content in more than one cell in the component. This can lead to problems related to uncommitted new values if the user "forgets" to confirm their edits and navigates away.

https://demos.telerik.com/blazor-ui/grid/editing-incell

Observe the inconsistency:

• While in edit mode, select the contents of another single cell. The cell in edit mode will close.
• While in edit mode, drag the mouse to select multiple other cells. The cell in edit mode will not close.

===

A possible workaround is to use @onfocusout and the Grid state to detect the problematic behavior and close the edit cell programmatically:

https://blazorrepl.telerik.com/cJFbQIFE08y9GN8A02

Description

When going fast over the Grid rows with the mouse cursor, the rows are highlighted after a delay. The delay is more noticeable on higher resolutions (2560x1440 or higher).

Steps To Reproduce

1. Hover the first Grid row and move the mouse cursor towards the last row (or vice versa).

Actual Behavior

In the app that targets .NET10 the row hover styles are applied with a delay, whereas in the app that targets .NET8 the hover styles are applied as soon as the mouse enters the boundaries of a row.

Expected Behavior

Similar performance in applying hover-related styles.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

Please add support for programmatic exporting of Grids (SaveAsExcelFileAsync() and ExportToExcelAsync() ) with a GridExcelExportOptions argument and multi-column headers.

===

A potential workaround is to programmatically click the built-in export command button, which can even be hidden:

@using Telerik.Blazor.Components.Grid

@inject IJSRuntime JS

<PageTitle>Home</PageTitle>

<TelerikGrid Data="@GridData">
    <GridToolBarTemplate>
        <TelerikButton OnClick="@ExportGridWithOtherColumns">Export Programmatically</TelerikButton>
        <GridCommandButton Class="hidden-export-button" Command="ExcelExport">Export Natively</GridCommandButton>
    </GridToolBarTemplate>
    <GridSettings>
        <GridExcelExport OnBeforeExport="@OnGridBeforeExport" />
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Id)" Width="100px" />
        <GridColumn Field="@nameof(Product.Name)" Width="120px" />
        <GridColumn Title="Product Details">
            <Columns>
                <GridColumn Field="@nameof(Product.Group)" Width="180px" />
                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="120px" />
                <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="120px" />
                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" Width="180px" />
                <GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .hidden-export-button {
        display: none;
    }
</style>

<script suppress-error="BL9992">
    function clickExportCommandButton() {
        let hiddenExportButton = document.querySelector(".hidden-export-button");
        if (hiddenExportButton) {
            hiddenExportButton.click();
        }
    }
</script>

@code {
    private List<Product> GridData { get; set; } = new();

    private void OnGridBeforeExport(GridBeforeExcelExportEventArgs args)
    {
        List<string> exportableColumnFields = new List<string> { nameof(Product.Name), nameof(Product.Price), nameof(Product.Quantity) };
        List<GridExcelExportColumn> ColumnsToExport = new();

        foreach (GridExcelExportColumn column in args.Columns)
        {
            if (exportableColumnFields.Contains(column.Field))
            {
                ColumnsToExport.Add(column);
            }
        }

        args.Columns = ColumnsToExport;
    }

    private async Task ExportGridWithOtherColumns()
    {
        await JS.InvokeVoidAsync("clickExportCommandButton");
    }

    protected override void OnInitialized()
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
                Group = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 10000),
                Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
                Discontinued = i % 4 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Group { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

• If you select a row and then unselect that row (SelectedItems is empty), and hit the incorrectly enabled delete button, it removes a row that has not been selected. When there is no selected row, the delete tool should be disabled.

• If you use multiple selection, the delete tool will delete the last row, which is unexpected. It should delete all selected rows.

Workaround:

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

    private List<Employee> SelectedItems { get; set; } = new();

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}

I'm using an OnRead grid with ExpandoObjects. The error happens on the backend when trying to process the result of ToDataSourceResult(...)

When trying to access the Items property of AggregateFunctionsGroup in a multi level grouping scenario, using ExpandoObject, and the top level group has a null key, trying to access the Items property will result in a NullReferenceException. I've made this helper, but it cannot process the subgroups because of this error.

private static void FlattenGroup<T>(AggregateFunctionsGroup group, List<T> result)
{
    if (group == null)
    {
        return;
    }

    if (group.HasSubgroups)
    {
        foreach (var sub in group.Items.OfType<AggregateFunctionsGroup>())
        {
            FlattenGroup(sub, result);
        }
    }
    else
    {
        result.AddRange(group.Items.OfType<T>());
    }
}

In a scenario where I have an ExpandoObject with properties A and B, where A = 1 and B = null; grouping by A then B works. Grouping by A or B alone also works. But grouping by B then A causes the NullReferenceException when trying to access the group.Items. 

When Virtual Scrolling is enabled and the grid is set to inline editing, clicking the Add button does not start editing on the first click. The button must be clicked twice for a new row to enter edit mode.

Steps to Reproduce:

1. Open this example - https://blazorrepl.telerik.com/QfaZEibY50abpby200

2. Scroll down the grid.

3. Click the "Add" button.

Upon the first click, a new row is inserted but then immediately closed. You have to click it a second time to insert a new row.

I want to change the default Grid loading animation to a pulsing loader indicator.

When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint. 

It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.

The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".

https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44

Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.

The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.

If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.

===ADMIN EDIT===

A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.

Since verion 9, the new styling is doing something strange.

The issue is also observable on the Tererik demo site (as well as our published applications) but I have noticed its on webassembly more-so than server apps;

https://demos.telerik.com/blazor-ui/grid/adaptive

If I run the demo site, the new pagination style (where you can type the page you want to navigate to) will flash up for a second, then it will go back to the old style after a second or 2.

Would anyone know why this is happening?