If you create a second Grid on the page, it will clear the SearchBox input value of the first Grid.

<p><TelerikButton OnClick="@ToggleSecondGrid">Toggle Second Grid</TelerikButton></p>

<TelerikGrid Data="@GridData">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    </GridColumns>
</TelerikGrid>

@if (ShowSecondGrid)
{
    <TelerikGrid Data="@( new List<Product>() )">
        <GridColumns>
            <GridColumn />
        </GridColumns>
    </TelerikGrid>
}

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

    bool ShowSecondGrid { get; set; }

    async Task ToggleSecondGrid()
    {
        ShowSecondGrid = !ShowSecondGrid;
    }

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

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product " + i.ToString(),
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
                Discontinued = false
            });
        }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
    }
}

Grid virtual scrolling will freeze in the following scenario:

1. Open https://demos.telerik.com/blazor-ui/grid/virtual-scrolling
2. Scroll to the lower part of the Grid
3. Filter any column, so that the number of items becomes less than the current scroll position
4. The Grid will show "no records to display" and row placeholders, even if there are items to display

How can I get the tooltips for validation of each field displayed at the corresponding field in a Grid Popup form, not just the summary below the Form, etc?

---

ADMIN EDIT

---

This will be handled through exposing an option to set your preferred field validation message type - tooltip or inline. It will cover all edit modes (Popup, Inline, InCell).

If you want to remove the ValidationSummary after adding field validation messages, check the ability to remove ValidationSummary from the Popup edit form.

Here is the scenario:

• UI for Blazor version 2.30
• Grid with InCell editing
• EditorTemplate with a DropDownList inside

In version 2.30 there is no longer need for an explicit blur handler for the in-cell editor template. The editor template closes automatically when the user selects a value from the DropDownList. However, the new value is ignored.

REPL test page: https://blazorrepl.telerik.com/mFbcmQvs16Lf1jwv18

Hi

I have a question regarding the telerik grid component particularly the hierarchy. Is it possible to open a hierarchy programmatically? For example:

I have my grid with information. Every row have more information to show. Those are stored in a hierarchy level to this row. Can I, instead of clicking the '+'-button in the row, just open it with with a method that i call e.g. in another button?

I want to make the rows clickable, i saw in the forum that this isn't yet supported for the grid. Now, I'm placing a div-Tag in the DetailTemplate of this row, and give that div a onclick-Attribute. The method the div invokes, should open the row for me respectively show the hierarchy of this row.

Is this possible?

thanks for your support.

regards

Ali Shala

When a user clicks outside of the edited input in the same cell, the cell remains in edit mode. The problem occurs in the 2.30.0 version.

You can see this behavior in the Incell Editing demo.

The TelerikGrid is kind of missing a "None" Value in the enum for the EditMode.

We need to disable the edit mode based on a value from the model (role access restricted), and I don't see any way this is possible without copy-pasting the entire grid under an if statement.

------ADMIN EDIT-------

A possible workaround at the moment is to set the "Editable" parameter of the columns to "false" or not use a command column with "edit".

Another workaround can be to attach a OnEdit handler and cancel the event based on the view model flag only. If the user cannot edit - always cancel.

I have a filterable DropDownList in a Grid EditorTemplate. The edit mode is InCell.

When the user opens the dropdown, the edited cell closes immediately with an OnUpdate call. The DropDownList value can be changed only with the keyboard or if I disable DropDownList filtering.

===

The same problem occurs with any component that uses a popup and the popup can gain focus - ComboBox, ColorPicker, etc.

Try to dynamically switch between Scrollable and Virtual modes. You would need to manually refresh the Skip property through the Grid state, or it won't work.

-----------ADMIN EDIT------------

You can use the ValueChanged handler to manually refresh the Skip property as shown below.

public TelerikGrid<ExpandoObject> TelerikGrid { get; set; }

private bool IsPageable = false;

private int Page { get; set; }

public void ChangeHandler(bool value)
{
    //Sync the paging with scrolling

    if (value)
    {
        IsPageable = value;
        var state = TelerikGrid.GetState();
        state.Skip = 0;
        state.Page = 3;

        _ = TelerikGrid.SetState(state);
    }

    IsPageable = value;

    StateHasChanged();
}

Using mobile browser (Safari iOS or Chrome Android)
Go to demo grid page
https://demos.telerik.com/blazor-ui/grid/overview
Click any grid's filter menu which contains text field
Try to enter text into textbox.
The filter menu automatically closed, so you can't enter anything

---

ADMIN EDIT

this happens because the keyboard pops up, changes the screen size and may even scroll the page, and both of these events hide the popup menu.

A workaround could be using the filter row mode, with the caveat that it takes up more space on the initial rendering, and that filtering happens immediately.

---

Hi, please expose the debounce delay as a property of TelerikGrid so we can set how soon virtualized columns are loaded after the user scrolls.

**Admin Edit**

This feature request requires research, and if such DebounceDelay parameter can work with good quality in all cases - it will be implemented. Additionally, we will revise the feature together with loading next set of columns if it will be applicable.

**Admin Edit**

Occasionally I am getting TaskCancellation errors such as:

[13:07:52 ERR] Unhandled exception in circuit 'hQsJqY3F4XbTbzQETSggJClg_e4YRyQkrKHFMHCXugM'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikComboBox`2.Dispose()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__140_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

===========

ADMIN EDIT

===========

The error is related to a Microsoft bug. It occurs one minute after some client component has been disposed.

The exceptions are not bypassed due to memory leak. The bug is expected to be fixed in .NET 6 and this will be respected for the Telerik components, so that the errors do not appear.

Documentation states that Grid supports Virtualization with Grouping if it is done by loading the Groups on-demand.

See:

On page: Blazor Grid - Load Group Data On Demand | Telerik UI for Blazor

From this, it appears that Virtual Scrolling, Group Load on Demand, and pagination of the results should function as expected.  I'm specifically focusing on the section where it says "load on demand for the data when the user expands a group or when they scroll to need a new set of available groups".

The behavior I am seeing in my Telerik Repl is not matching up with that.

See:  https://blazorrepl.telerik.com/QFbmurvT41eZq6Ld34

In the repl, I have added some Console.WriteLines to see when OnRead is actually called, as well as to log out some other information about the OnRead Request.  It can be seen that no pagination information is included in the request (PageSize = 0, Skip = 0) while the PageSize is set on the actual Grid component (PageSize = 20).

As a result, all groups are loaded initially, which will be problematic if my server-side data set is being grouped on a value that will result in thousands/millions of groups.

It is possible that I missed something in the documentation that would enable the expected behavior (the Grid actually giving me PageSize and Skip so pagination will actually work), but it is also equally possible that this was never intended behavior, and I have been misled by the documentation page.

If a Grid with ColumnVirtualization enabled is programmatically resized at runtime, some of its cells appear empty. 

The same behavior will occur after column resizing. It looks like it is not accordingly updated as if a scroll horizontally, it updates and the missing data is rendered.

===

Edit: Here is a workaround for the column resizing scenario. Part of this approach can be used to workaround Grid resizing as well -

Use the OnStateChanged event simulate horizontal scrolling inside the Grid after column resize. The custom Grid CSS class is optional, if there are pages with multiple Grids.

Razor

<TelerikGrid Class="virtual-grid"
  OnStateChanged="@( (GridStateEventArgs<GridModel> args) => OnGridStateChanged(args) )" />

C#

    async Task OnGridStateChanged(GridStateEventArgs<User> args)
    {
        if (args.PropertyName == "ColumnStates")
        {
            await js.InvokeVoidAsync("loadColumns", "virtual-grid");
        }
    }

JavaScript

function loadColumns(gridClass) {
    var rowContainer = document.querySelector("." + gridClass + " .k-grid-content");
    if (rowContainer) {
        rowContainer.scrollLeft += 1;
        rowContainer.scrollLeft -= 1;
    }
}

I have a WASM application and I setup my Grid to use the editor as an editing field in the Grid. When the user types something the application is laggy and it might even hang.

---

ADMIN EDIT

Attached is a sample app that alleviates this a little by using a regular textarea and making editor updates less frequent.

---