I have a reset all button that clears a grid of all column, filter, sorts etc.

I need it to also reset any searchbox criteria.  I can easily clear the searchbox of it's value using javascript, but this does not then trigger the searchbox to reset the grid.

---

TELERIK EDIT

The officially supported way to clear the GridSeachBox is through the Grid state. You can see an example in the Grid SeachBox documentation.

A possible workaround for old versions is to clear the search textbox with JavaScript and to trigger its input event:

@inject IJSRuntime js

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true"
             Class="custom-grid-class">
    <GridToolBarTemplate>
        <GridSearchBox />
        <TelerikButton Icon="@SvgIcon.X" OnClick="@OnClearButtonClick"></TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Description)" />
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">//
    function clearSearch() {
        // locate the searchbox of the Grid
        const input = document.querySelector(".custom-grid-class .k-grid-search input");
        // clear the value of the input
        input.value = "";
        // dispatch the input event in order to force the Grid event binding to trigger the filtering
        input.dispatchEvent(new Event('input', {bubbles: true} ));
    }
//</script>

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

    private async Task OnClearButtonClick()
    {
        await js.InvokeVoidAsync("clearSearch");
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
                Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}

How would you remove the icon to expand a detail grid only for certain rows?  Some rows will not have detail data and should not be expandable.

---

ADMIN EDIT

As suggested by Joel, you can use the RowRender event and a bit of CSS to hide the button. Here is a Knolwdge Base article that shows a fully runnable sample: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-expand-button.

    void OnRowRenderHandler(GridRowRenderEventArgs args)
    {
        OrgUnit item = args.Item as OrgUnit;

        args.Class = item.Children.length ? "has-children" : "no-children";
    }

tr.no-children .k-hierarchy-cell *{
    display:none !important;
}

how to use Multiple Column Header in grid?

thanks

In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.

Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).

I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.

---

ADMIN EDIT

The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.

---

Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

Sometimes, we just want a simple equal filter in grid, without operators options

---

ADMIN EDIT

If you want to modify the current behavior and layout of the filters, use the filter template (there is another example in this thread - in the post from 29 Jun 2020 that you can also use as base).

---

A Blazor Grid column having a boolean data type field should display as checkbox instead of the text True/False.

A checkbox is a fine representation for the end user, True/False may be ok for a developer ;-)

Editing the boolean value by a checkbox is already fine.

So far in the TelerikGrid component it is only possible to set the title of a column to a string. It would be useful to give the title/header a template instead of a simple string. In this way one could for example place a button, image, (...) inside the columnheader.

This kind of template-ability could be very handy in various other cases elsewhere, so please bring this flexibility into ui for blazor.

The need is to update, add or delete a lot of items at once (for example, the selected items). Sample of batch editing: https://demos.telerik.com/kendo-ui/grid/editing.

Perhaps this may become possible through methods on the grid that invoke the CUD operations.

---

ADMIN EDIT

There is a sample project that accomplishes most of these goals: https://github.com/telerik/blazor-ui/tree/master/grid/batch-editing

The grid state offers a great deal of flexibility in terms of controlling the grid, up to putting it in edit/insert mode.

---

Hi - this one is a feature request, not a bug. :)

For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."

The request targets a hierarchical Grid where some items are expanded - when I edit a parent item and then update it, all the respective detail items collapse.

Please add support for persisting the expanded state of the items.

---

ADMIN EDIT

---

The feature applies to the other data operations as well (for example, paging, sorting, filtering etc.).