I would like to be able to set Min Width parameter to a Grid Column. The behavior I expect to see is:

• The Grid Column with set Min Width will take all the available space on large screens
• On smaller screens it will shrink but no more than the set min width (e.g. 100 px).

If a developer changes the structure of the grid in a new release, such as adding or removing columns, the restore can have very unexpected results.

We get around this by storing a version number with the grid and incrementing that number when we change the grid columns.  If the version number on the grid does not match the version number stored with the state, we don't restore it.

We would like to see this be more of an automatic feature of the grid.

Compare the columns in the saved state with the columns in the Grid declaration. You may need to change the way the Grid columns are declared, according to the the linked documentation. If there is inconsistency between the two collections, strip the column information from the saved state before restoring it.  (This was suggested by Dimo from Telerik in a support ticket)

An alternative would just be to throw away that state when it can't be safely restored.

It is impractical to set the grid columns to fixed width. I'll explain with example:

I have grid with 4 columns. The grid should have width 100%.

- Column 1: short text, 10-15 characters. I need this one to auto width to content.

- Column 2: checkbox, also auto-width to header title.

- Column 3: free text that may wrap on multiple lines. I need this column to use all available horizontal space so it will push the 4th column to the very right.

- Column 4: button. auto-width to either header title or button width, whichever is wider.

The auto-width feature is already requested: Autofit column widths on data load (telerik.com) but I don't see a feature request to handle the Column 3 scenario.

Hello, 

After just a sort operation, in the event handler of OnStateChanged event, the FilterDescriptors of GridStateEventArgs.GridState is not empty. 

Steps to reproduce : 

1) Implement Grid with OnStateChanged and OnRead : 

<TelerikGrid 
             OnStateChanged="@((GridStateEventArgs<IGetAgences_Agences_Items> args) => OnStateChangedHandler(args))"
             OnRead=@ReadItems

    async Task OnStateChangedHandler(GridStateEventArgs<IGetAgences_Agences_Items> args)
    {
        var filters = args.GridState.FilterDescriptors; // filters are not empty after just a sort opration
      
    }

    async Task ReadItems(GridReadEventArgs args)
    {

        this.LoadData()

        await InvokeAsync(StateHasChanged);
    }

2) Sort a column 

3) The OnStateChanged event is fire

4) In the OnStateChangedHandler,  the filters are not empty : 

Expected behaviors :

If no filters added, the filters of the GridState must be empty 

Thank's

Thomas

Hi,

Is it possible to drag grid row to another page on the same grid? 

thanks,
Irina

The new functionality to have the in-cell editing validate based on the model doesn't work with fluid validation. We use a custom component that integrates fluid validation with blazor which works fine for all controls including telerik input controls, but the built in validation for the grid editing doesn't seem to work with it.

Also there seems to be a bug with the validation using standard attribute validation. If the row you are working on has an existing record that does not validation properly, the in-cell editing will stop working once you go in to any cell and make a change. The edit mode on that cell will close as if everything updated ok, but after that, you will not be able to click into any cell to edit. While normally the data should already be valid, there can be scenarios where new validation rules are applied and existing records would become retroactively invalid.

Thanks,

Alan

I am having problems with grouping in TelerikGrid.

When I drag the column into the header for grouping, I get an error ArgumentNullException: Value cannot be null, apparently,  somewhere in TelerikGrid.SetProcessedGroups.

@page "/test"

<div>
    <TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu" 
                 ShowColumnMenu="true"
                 TotalCount="@TotalRowCount"
                 SelectionMode="GridSelectionMode.Single"
                 OnRead=@ReadData>
        <GridAggregates>
            <GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
        <GridColumns>
            <GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
                <GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>
</div>


@code {

    protected TelerikGrid<TestData> grid;
    protected List<TestData> GridData { get; set; }
    public int TotalRowCount { get; set; } = 0;
    public int Page { get; set; } = 1;
    public int PageSize { get; set; } = 10;

    protected async Task ReadData(GridReadEventArgs args)
    {
        await LoadData();
    }

    protected async Task LoadData()
    {
        GridData = await GetSampleData();
        TotalRowCount = 100;
    }

    protected async Task<List<TestData>> GetSampleData()
    {
        List<TestData> results = new List<TestData>();

        results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
        results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
        results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
        results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
        results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
        results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
        results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
        results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
        results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
        results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });

        await Task.Delay(1000); //simulate loading delay ...

        return results;
    }

    protected void ViewItem(GridCommandEventArgs args)
    {
        //navigate to edit view ...
    }

    public class TestData
    {
        public string Name { get; set; }
        public string Surname { get; set; }
        public string Department { get; set; }
    }
}

I am getting the following error:

This happens in Chrome and Edge, in Webassembly and Server-side blazor.

Am I doing something wrong?

Thanks for the help!

The grid should support INotifyPropertyChanged for the objects in the grid, i.e. if the data object implements INotifyPropertyChanged and a property value changes, the corresponding cell value in the grid should also change.

When you resize grid columns the column width does not follow the mouse. This occurs in your demo:

https://demos.telerik.com/blazor-ui/grid/column-resizing

Make a column wider or narrower and the column width does not stay in line with where the mouse is.

---

ADMIN EDIT

This is not a bug, but intended behavior. As web grid is not Excel. You can find more details in the original thread opened by Aditya with this question: https://www.telerik.com/forums/grid-checkboxlist-filter---auto-select-all-upon-entering-filter-criteria

---

This is related to Grid CheckBoxList Filter - https://demos.telerik.com/blazor-ui/grid/filter-checkboxlist

In Microsoft Excel, when we start typing in the Search box, the matching entries along with "Select All" are already checked. So upon typing the required criteria, the user just needs to select Ok button to view the filtered results.

In the case of Blazor Grid, the matching entries and Select All option are not checked automatically. So the user would need to do an additional action of checking "Select All". Please refer to the attached screenshots.

Is there a way to have "Select All" auto checked upon typing the filter criteria?

asynct Task ContextMenuClick(ContextMenuItem) {
  var state = Grid.GetState();
  state.FilterDescriptors.Add(new FilterDescriptor
  {
    Member = "Created",
    Operator = FilterOperator.IsEqualTo,
    Value = "Administrator"
  }); 
  await Grid.SetState(state);
}

How it should look like:

Hi,

Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding

I am already using your do-it-yourself example but IMHO it is too much code

Regards

Andrzej

If in a grid columns are bound to integer values which shall be treated as enum values it can be done with the FieldType parameter.

Unfortunately the new FilterMenuType.CheckBoxList does not work as expected then.

With

<GridColumn Field="@(nameof(MyModel.MyPropertyId))"
                     FieldType="@(typeof(MyPropertyEnum))"
                     Title="MyProperty"
                     FilterMenuType="@FilterMenuType.CheckBoxList">

the filter shows Integers instead of Enum-Strings.

(With FilterMenuType.Menu the filter correctly treats the values as enums)

Regards,

René

Values of FilterMenu are not preserved in GridState. 

If FilterRow is used instead of FilterMenu then the values are preserved in GridState.

(I believe that Filtering was preserved with FilterMenu as well in some previous version but I could be wrong.)

Regards,

René

Can you either fix the Export functionality to apply Custom footers that are not aggregated to the exported data or Change Enum options to add a Custom type to allow custom footer template values to be exported along with the other GrigAggregates?

I'm using the OnRead / OnCreate / OnUpdate / OnDelete events of the TelerikGrid. Most examples do not use OnRead to load data, instead using OnInitializedAsync().

When performing an update two events will fire, such as OnCreate and then OnRead to reload the grid data - which makes sense. The problem is OnRead is not awaited, so in effect the Read method can reload the data prior to data being updated on the server. This is especially the case if I have a JavaScript delete confirmation prompt.

What's my best way forward? Not use OnRead and use OnInitializedAsync instead? Somehow trigger OnRead again (which would effectively trigger it twice)?

Thanks,

Dave

Hello,

When using grid command button edit with the onedit handler shown in this documentation https://docs.telerik.com/blazor-ui/components/grid/editing/inline

There is a bug that causes the grid to reset to the first page when editing the last item on any page that isn't the first. In other words we can edit the last item in the gird on the first page but not on the second, third, fourth...etc. 
I have taken out all the logic in my edit handler as well and the problem still presents itself. 

Below is the relevenat code sample and I have also zipped a short video demonstrating the behavior.

<TelerikGrid @ref="@GridNameHere"
                             Class="smallerFont"
                             Data="@DataHere"
                             Pageable="true"
                             Page="@Page"
                             PageSize="@PageSize"
                             TotalCount="@Total"
                             Sortable="@true"
                             Groupable="@false"
                             FilterMode="@GridFilterMode.FilterMenu"
                             Reorderable="@true"
                             OnEdit="@OnEdit"
                             OnUpdate="@OnUpdate"
                             OnCreate="@OnUpdate">
                    <GridToolBar>
                        <GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
                    </GridToolBar>
                    <GridColumns>
                        <GridCommandColumn Width="150px">
                            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
                            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                        </GridCommandColumn>

                        <GridColumn Field="@(nameof(ModelName.FieldName))" Title="Column Name" Width="100px" />

                    </GridColumns>
                </TelerikGrid>

//Handler for edit

 protected void OnEdit(GridCommandEventArgs args)
{

// no code in here and problem still presents itself but feel free to put anything I recommend using the sample from the documentation above

}

I am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:

@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
    Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
              Groupable="true">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport">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 {
    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; }
    }
}

Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :

Please let me know if you need anymore details.

ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.

Hi there,

as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.

After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:

https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug

Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.

The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).

What are your thoughts? Is it a bug?

So lonG

Daniel