The Grid shows row skeletons in virtual scrolling scenarios when:

• The Grid is scrolled half a row, but the Skip value in the Grid state is still zero.
  
• The user filters while the Grid PageSize is greater than the total item count.

Test page: https://blazorrepl.telerik.com/mSkBaXkC50cEXmMB42

A possible workaround is to:

1. Scroll the Grid to the top with JavaScript. This will trigger a new data request automatically.
2. Reset the Grid state if the Grid is not scrolled, which will again trigger a new data request.

Example: https://blazorrepl.telerik.com/cSYrvEYW19htMCD934

Another possible solution is to disable the virtual scrolling at runtime if the total item count is too small: https://blazorrepl.telerik.com/mSOhvYuW47DaMk6c00

I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).

Can I somehow trigger the Grid Excell Export command Manually? 

---

ADMIN EDIT

Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <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 {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



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

---

I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu. I am using the Telerik Grid. The Column Menus use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.

I want to be able to set a CSS to the main wrapping element of the Column Menu (<div class="k-animation-container>), so I can specifically set the z-index for only Column Menu instances of the animation container. 

I have the following configuration:

Editor component in Grid EditorTemplate and the Grid editing mode is popup

Here is a REPL example https://blazorrepl.telerik.com/QeuUwsvb15sxbLuB04

The popup that opens when editing the Grid resizes when I type in the Editor

Steps to reproduce the issue:

1. Run the REPL example

2. Click the Edit button in the Grid

3. Resize the popup

4. Start to type something in the Editor

5. The popup resizes

Please add an attribute to Blazor GridColumn which allows to easily format data with the default .NET standard formats

e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" Format="0#.##" />

It's a little bit annoying always having to define a template for this purpose.

The Grid will cancel the insertion of a new item when:

• the new item is not saved yet
• the new item is expanded and its DetailTemplate is visible
• the user changes the value of a column that has an editor template

Blazor REPL test page

===

In the meantime, a possible workaround is to hide the expand button for items, which are not added to the "permanent" Grid data yet. Here is how to do it with CSS:

.k-grid-add-row .k-hierarchy-cell .k-icon {
    display: none;
}

Until version 6.0 it was possible to set the Grid PageSize to "All" by setting it to the total item count. This workaround no longer works.

Please enhance the API to allow setting an "All" page size with code or initially.

Hi,

 documentation missing one extremely "silent" breaking change in grid data binding.

When binding/refreshing(subsequent reload) data to VARIABLE, there is "random" need to call grid.Rebind(); Mostly, when data are loaded outside of the grid, ie by some button, or another component. Used together with selected items and grouping enabled.

<TelerikGrid Data="@GridData" SelectionMode="GridSelectionMode.Single" SelectedItems="..."
						 OnRowClick="@...r"  @ref="GHL" ....>

prior v6.0, everything is OK:

protected async Task ReloadGrid(int? xid)
{

GridData= await LoadDatafromservice<TItem>...;

}

After upgrading same code, it silently not displaying data or cras.

new breaking behavior at v6.0  - hotfix, but "ugly one":

protected async Task ReloadGrid(int? xid)
{

GridData= await LoadDatafromservice<TItem>...;

GHL.Rebind(); //required, otherwise grid content(rows) is not update. Later the grid crash when selecting row etc. Old "rows" are still displayed;

}

Its weird to gues, where rebind is needed and where not. Previous versions acting as expected(async - task = no problem).
Make it documented, "what is correct" and when.

Or if it is a bug, please move it out from feature request.

Thanks

When you combine frozen column with row selection and horizontal scrolling is applied (due to column and grid widths), column content are not hidden under frozen columns when a row is selected, as seen bellow in lines 2,3 and 4.

Checkbox, Product Name & Command columns are frozen. "Quantity per Unit" values are clearly visible behind frozen "Product Name" values. You can find a test scenario here (Telerik REPL for Blazor).

All themes suffer from this issue except Fluent theme. With default and bootstrap themes it happens on all odd selected lines and with material theme it happens on all selected lines.

Could there be an option to NOT close the filter dropdown when the clear button is pressed? Is there an AutoClose parameter or something else?

In this example.  Select a cell in column C.  Then double click on another cell in column C.  The unhandled exception will show up and a null reference exception is logged in the console.  

https://blazorrepl.telerik.com/QHuSQBlj170zO4u130

The exception message is:

System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm.

Hi,

 when using SetStateAsync(), OnRead is called ok, but loading indicator is not presented as usual.

How to reproduce:

1. button = loading data by SetStateAsync(), no progress indicated.

2. button = loading data throught rebind, is ok

demo in repl

demo is based on https://docs.telerik.com/blazor-ui/components/grid/refresh-data

Expected: same behavior as by button 2.  -> Rebind()->OnRead()...loading progress

Thanks

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.

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.

On grids with a lot of data there is a delay between when the grid is assigned the data to when the grid shows the data.  During this UI painting period, the NoDataTemplate is displayed for a second or two.

The grid should not show the NoDataTemplate unless the data source is loaded with an empty collection, not just while it is still trying to show the data.

Note: Having a generic message like in the documentation "No Data available / The data is still loading ..." is not satisfying our users. (Blazor Grid - No Data Template - Telerik UI for Blazor) These should really be two different states that can show different messages.

Thanks