When using the Filter Menu inside the Column Menu filter value is reset if Rebind is called. For reference, if using FIlter Row or a standalone Filter Menu value is not reset upon invoking Rebind.

Reproduction: https://blazorrepl.telerik.com/mdOJYHas48vPCPUv47.

I would like to lock a column at a certain index in the Grid. For example, I would like to have a column on index 0 (the first column in the Grid) and it should not be reordered by any user interaction (dragging the column itself or dragging other columns in its place). 

Also if the user tries to drag a column over my locked column the drag handlers must not be present/or show that it is an invalid drop location.

===

Telerik edit:

In the meantime, a possible workaround is to:

1. Handle the Grid OnStateChanged event.
2. Check if args.PropertyName is equal to "ColumnStates".
3. Check if the Index of the first Grid column (args.GridState.ColumnStates.First()) is greater than zero.
4. Reset at least 2 column indexes, according to your preferences, so that the first column in the Grid markup is also the first column in the UI.
5. Reset the Grid state with SetStateAsync().

<p>The <strong>Name</strong> column index will always be 0.
    The Grid will either move the reordered column to index 1, or put it back to its previous index (revert).</p>

<p><label><TelerikCheckBox @bind-Value="@ShouldRevertGridColumnOrder" /> Revert Invalid Column Reordering</label></p>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@SampleModel"
             Pageable="true"
             Sortable="true"
             Reorderable="true"
             OnStateChanged="@OnGridStateChanged">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" Reorderable="false" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
        <GridColumn Field="@nameof(SampleModel.Price)" />
        <GridColumn Field="@nameof(SampleModel.Quantity)" />
        <GridColumn Field="@nameof(SampleModel.StartDate)" />
        <GridColumn Field="@nameof(SampleModel.IsActive)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<SampleModel>? GridRef { get; set; }

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

    private bool ShouldRevertGridColumnOrder { get; set; }

    private IEnumerable<int>? CachedGridColumnIndexes { get; set; }

    private async Task OnGridStateChanged(GridStateEventArgs<SampleModel> args)
    {
        if (args.PropertyName == "ColumnStates")
        {
            if (args.GridState.ColumnStates.First().Index > 0 && GridRef != null)
            {
                if (ShouldRevertGridColumnOrder)
                {
                    await RevertGridColumnOrder();
                }
                else
                {
                    args.GridState.ColumnStates.First(x => x.Index == 0).Index = 1;

                    args.GridState.ColumnStates.First().Index = 0;

                    await GridRef.SetStateAsync(args.GridState);
                }
            }

            CacheGridColumnOrder();
        }
    }

    private void CacheGridColumnOrder()
    {
        var gridColumnState = GridRef?.GetState().ColumnStates;

        if (gridColumnState != null)
        {
            CachedGridColumnIndexes = gridColumnState.Select(x => x.Index);
        }
    }

    private async Task RevertGridColumnOrder()
    {
        var gridState = GridRef?.GetState();

        if (gridState != null && CachedGridColumnIndexes != null)
        {
            for (int i = 0; i < gridState.ColumnStates.Count; i++)
            {
                gridState.ColumnStates.ElementAt(i).Index = CachedGridColumnIndexes.ElementAt(i);
            }

            await GridRef!.SetStateAsync(gridState);
        }
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            CacheGridColumnOrder();
        }

        base.OnAfterRender(firstRender);
    }

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

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}",
                GroupName = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                IsActive = i % 4 > 0
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string GroupName { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

At the moment the numeric and date filters keep the filter button visible even on narrow columns. This must be implemented for the string filter as well - it has a set width at the moment.

The "clear filter" button must always be visible as well (when there is a filter applied, of course).

Ideally, the filter elements will also have a common container with an accessible class so, for example, you can set its max-width to 50% or 100px to match desired UI easily without hacking through several different layouts and selectors.

We are using Grid control with OData source (ToODataString() exstension) and OnRead event. When we try to group by some column, it douesn't work. OData query to API is same and OnRead event fires but grid not grouping.

Example Repo - https://github.com/benhysell/BlazorGridPagingIssue

tldr - OnRead args do not contain the correct page after restoring state without manual intervention.

Project Setup

• Base Blazor Client/Server template with Weather Forecasts as the data
• Server has a single OData endpoint to return 50 weather forecasts.  Each forecast starts with Temperature 0 and adds 1 per row to allow one to know which page they should be on
• Client has two pages configured, 'Paging NOT Working' and 'Paging Work Around'

Steps to Reproduce

• Navigate to 'Page NOT Working', select a page, i.e. page 5, navigate to the Counter page, navigate back to Page NOT Working.
• Grid will show Page 5 in the page selector, however the data being show in from Page 1
• Looking at Chrome 'Network' tab the OData query to obtain data from the backend does not contain proper offset for Page 5 data
• args.Request.Page reports Page 1, however the state of the Grid was just restored to Page 5

Workaround

I currently have a work around, this can be seen in the other page 'Paging Work Around'.

• On the first call to OnRead I check to see the last Grid state that was stored
• If the arg.GridState.Page does not match, (Stored vs the Request) I update the Request with the proper Page
• Proper OData query is generated to the backend.

Expected Behavior

• After state is restored first call to OnRead() would report the proper Page and make correct OData call.

Using the Excel Export for Grid creates the Excel file, but on opening it, the columns that contain data are hidden. Unless I unhide the columns, the sprceadsheet looks empty.

---
ADMIN EDIT:
One idea to go about this is to expose an event that would allow users to modify the column width values before they get sent for export. The benefit of this approach is that if the columns are resized, the user will receive their current size in the specified unit e.g. rem, em or % and will be able to set the width in px.

Another idea is to default such column widths to some hardcoded value (say, 64px) or even the grid might try to calculate them (which can cause questionable results in stranger settings, but it is an idea - if an event gets exposed you will be able to do that in your application code).

---

This will let Excel mark the field as a Date and act according to the current culture on the machine that opens the file.

---

ADMIN EDIT:

This feature would let you define custom formats, so you may want to Vote for it and Follow it too: Custom Format for Excel Export per column. It is important to keep in mind that the Excel formats are completely different from the .NET formats.

If this is of high importance for you right now, you could create your own Excel file with the desired settings by following the example from this thread.

---

Horizontal scroll bar is visible, but doesn't move with cursor/current-cell.

---

ADMIN EDIT

Applies also to vertical scrolling with or without row virtualization (e.g., using InCell edit mode, pressing Enter will open the next row for editing, but it will not work out with row virtualization at all after the current viewport, and without virtualization you will not see what's happening until you start typing and the browser calls .scrollIntoView() for the editor)

---

If after adding a new item to a grid with inline edit the save button is double-clicked (e.g. by accident) two new items are added instead of one. Right now, the only way to prevent this seems to be to check if an item is already contained in GridData at the top of the OnCreate-Handler and cancel if necessary.  If a unique ID is not available yet (because it is created by the database when saving at the end of the handler) this means every Property has to be compared to check for equality.  This is very annoying.

Please add a parameter "DisableWhileBeingHandled" to TelerikButtons and make this the default for the CommandButtons in a Grid. The Buttons should only accept clicks if the previous handling is finished.

Kind regards,

René

For example in the following demo:

https://demos.telerik.com/blazor-ui/grid/custom-filter-menu

If I first filter "38" by "Size" and then open the second filter menu "Product Name", I see all the product names in the pop-up, not only the previously filtered by "Size" names. I want to see in the second filter pop-up only the filtered names by "Size".

It will be nice to have this grid filter out-of-box, so you don't have to scroll to unwanted values not part of the first filter.

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

As a possible workaround, you can use the Filter Menu Template:

It allows you to change the data for the filter menu.

Initially, the grid is filtered by "Is FTE? = True". It shows 20 lines. The sum of "Hours" should be 800. But the footer shows another value (depends on the random logic which you've implemented). See the attached screenshot.

Then, when changing the filter, the correct sum is shown.

But I need the correct value initially...

Re: I've just found out that using the OnRead event instead of the standard data binding solves the issue. Better said, it's a possible work-around.

ADMIN EDIT

Workarounds are:

- using a "real" model instead of a dynamic type

- removing the LoadGroupsOnDemand feature (and using the regular paging so you can still have grouping in case you were using virtual scrolling)

I suggest adding a FieldExpression property to the GridColumn so a developer would not need to create view models and templates for simple transformations of the existing model's properties. The field expression would be used for filtering and sorting as well. Its type would be Func<T, object> or Expression<Func<T, object>>.

   <TelerikGrid Data="@Persons">
            <GridColumns>
                <GridColumn FieldExpression="@(p => p.FirstName + " " + p.LastName)" />
            </GridColumns>
        </TelerikGrid>

Please support Display(Order = ...) with autogenerated Grid columns.

Such functionality will also be useful for controlling the order of manually declared columns when using a custom component for reusable columns. For example: https://blazorrepl.telerik.com/cGOtbwOX21f6zQcy35 - the "Name" column is rendered last and currently one cannot control its order.

public class DateModel
{
  [Display(Order = 2)]
  public string Id { get; set; }
  [Display(Order = 1)]
  public string Text { get; set; }
}

The Grid OnEdit event cannot be cancelled if the user tabs into a cell that should not allow editing.

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

Click on "Foo 2" or "Bar 2", and start tabbing. You will be able to edit the values on row 3, which should not happen.

There are two possible workarounds: use a conditional EditorTemplate, or check editability in OnUpdate.

<TelerikGrid Data="@GridData" EditMode="@GridEditMode.Incell" Navigable="true"
             OnEdit="@EditItem" OnUpdate="@UpdateItem">
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Foo)" Title="Foo (bug)" />
        <GridColumn Field="@nameof(GridModel.Bar)" Title="Bar (workaround)">
            @*<EditorTemplate>
                @{
                    var item = context as GridModel;
                    // workaround 1
                    if (item.IsEditable)
                    {
                        <TelerikTextBox @bind-Value="@item.Bar" />
                    }
                    else
                    {
                        <span class="k-textbox k-input k-rounded-md">
                            <input class="k-input-inner" tabindex="0" readonly value="@item.Bar" />
                        </span>
                    }
                }
            </EditorTemplate>*@
        </GridColumn>
        <GridColumn Field="@nameof(GridModel.IsEditable)" Title="Is Row Editable?" Editable="false" />
    </GridColumns>
</TelerikGrid>

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

    void EditItem(GridCommandEventArgs args)
    {
        GridModel item = args.Item as GridModel;
        if (!item.IsEditable)
        {
            args.IsCancelled = true;
        }
    }

    void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as GridModel;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        // workaround 2
        //if (index != -1 && argsItem.IsEditable)
        //{
            GridData[index] = argsItem;
        //}
    }

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

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Foo = "Foo " + i.ToString(),
                Bar = "Bar " + i.ToString(),
                IsEditable = i % 2 == 0
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Foo { get; set; }
        public string Bar { get; set; }
        public bool IsEditable { get; set; }
    }
}