Greetings!

I've been waiting for a few months now to swap to blazor, but one of the things that's currently holding us back is that the filter row can't be used together with the column menu.
I've always found this to be strange, since it's supported in the Angular and MVC versions, which we currently use.
Our users never filter via the column menu, always via the filter row. They hide/lock their columns via the column menu and sometimes sort.
This functionality is thus critical for us.

I can't find any feature request for it, nor any planned roadmap item.
Will this ever be supported because if not, we're gonna have to start looking for alternatives.

Kind regards.

It looks like the built-in validation does not respect clearing the edit item through state.  If you remove invalid edit item through Grid State, the Grid stays in edit mode and the OnRowClick stops firing.

The case is similar when you try to clear an invalid InsertedItem through the Grid State - the Grid probably stays in Insert mode and some events are not firing (for example CUD events).

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.

https://demos.telerik.com/blazor-ui/grid/grouping?_ga=2.11039728.515490770.1626709907-330381368.1614276734&_gac=1.160841295.1626814954.Cj0KCQjw6NmHBhD2ARIsAI3hrM21z8_X1eDgy6hwuoo7UHXFZd_lG3Q5ZpE0l_1n2AUV9OdtvO8VBikaAmXyEALw_wcB

Typo:

  <span>Produts for sale: @productsCount &nbsp;</span>
Should be Products

Hi,


I am getting an unhandled exception when setting the GridState of a TelerikGrid with the SetState method that has multi-column headers.


Exception:

Unhandled exception rendering component: More than one sibling of element 'col' has the same key value, 'Telerik.Blazor.Components.GridColumn'. Key values must be unique.

Example grid:

<TelerikGrid @ref=@TestGrid Data=@TestData FilterMode=GridFilterMode.FilterMenu Sortable="true" SortMode=SortMode.Multiple TItem="TestDataItem">
   <GridColumns>
       <GridColumn Title="Test Column 1" Field=@nameof(TestDataItem.TestColumn1) />
       <GridColumn Title="Test Column Group" />
          <Columns>
             <GridColumn Title="Test Column 2" Field=@nameof(TestDataItem.TestColumn2) />
             <GridColumn Title="Test Column 3" Field=@nameof(TestDataItem.TestColumn3) />
          </Columns>
       </GridColumn>
   </GridColumns>
<TelerikGrid>

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

I want to use a multi-checkbox filter with ExpandoObject in Grid.

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é

The Locked column content is misplaced, it is not matching the column header and that breaks the layout of the other columns as well.

When you scroll to right, the Locked column should stick to the leftmost side of the Grid . However, at some point its content is even missing.

Here is the scenario and how to reproduce the issue:

1. A Grid with a horizontal scrollbar. All columns have explicit widths, according to requirements.
2. The first 3 columns are locked (frozen).
3. Make the frozen columns 1 - 3 smaller. Save the Grid state.
4. Refresh the page and restore the Grid state in OnStateInit.
5. Scroll the non-frozen columns to see how the frozen columns are positioned, according to their previous larger widths. Now there are gaps between these columns.
6. The reverse issue occurs if the frozen columns are expanded in (3). Then, after state restore they overlap.

When you shrink a Grid column, ellipsis is rendered to represent the clipped text. However, at some point of resizing the Column menu and Filter menu indicators are overlapping the Grid column header text.

==========

ADMIN EDIT

==========

In the meantime, a possible workaround would be to use some custom CSS to add right padding to the k-link span, so it does not get overlapped by the column menu icon. That padding should be approximately as wide as the span holding the column menu icon. You can also set a custom CSS class to the Grid through its Class parameter to make sure you are styling this exact instance of the Grid and not all instances on the page/app. The example below demonstrates how to achieve the described approach.

<style>
    .my-grid .k-link {
        padding-right: 40px;
    }
</style>

<TelerikGrid Data="@MyData"
             Class="my-grid"
             Pageable="true"
             PageSize="5"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             Resizable="true"
             ShowColumnMenu="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name"/>
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Add a setting similar to the AllowUnsort so that I can disable the unsorted state of the Grid.

ADMIN EDIT:

Here is how to achieve this with the Grid state.