Unplanned
Last Updated: 01 Oct 2021 15:43 by ADMIN
Robert
Created on: 01 Oct 2021 11:42
Category: Grid
Type: Bug Report
0
Change RowHeight on the fly
A virtual Grid does not handle well dynamic RowHeight changes. The virtual scrollbar is not refreshed and scrolling breaks.
3 comments
ADMIN
Dimo
Posted on: 01 Oct 2021 15:43

Hi Robert,

It looks like I did not express myself clearly. When I said "the Grid should be able to react correctly...", I meant to agree that this is not happening with the RowHeight property.

I am truly sorry to see that our components are giving you a hard time. We plan to provide the UI for Blazor source code to all commercial license holders in November.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Robert
Posted on: 01 Oct 2021 13:27

Well, 

what you are saying is not quite true. The Grid does NOT react to attribute changes. It works because the grid is removed from the DOM and then initialized with new set of parameters.
I'm aware of the workaround but this is highly inconvenient. I need to add some new variables in my razor files that have nothing to do with my business logic and makes my app harder to maintain. 

I'm very dissatisfied with your components. There are a bunch of small bug that take too long to fix and we need a lot of workarounds. It is so bad that I had to write my own input components. The only thing I'm using from Telerik today is Grid (and I'm thinking of dropping it as well).

Is there a chance for the paying customers to get a source code of the components so I could fix some bugs myself?

 

Best regards,

Robert

ADMIN
Dimo
Posted on: 01 Oct 2021 11:49

Hello Robert,

Indeed, the Grid should be able to react correctly to all attribute changes. Currently, it is possible to change the RowHeight on the fly if you recreate (re-render) the Grid. Optionally, you can also restore the Grid state. Here is an example.

<p>
    Choose a row height:
    <TelerikDropDownList Data="@RowHeights"
                         Width="5em"
                         Value="@RowHeight"
                         ValueChanged="@( (int v) => RepaintGrid(v) )" />
</p>

@{
    if (ShowGrid)
    {
        <TelerikGrid @ref="VirtualGrid"
                     Data="@GridData"
                     PageSize="20"
                     RowHeight="@RowHeight"
                     ScrollMode="GridScrollMode.Virtual"
                     Height="420px"
                     Resizable="true"
                     Sortable="true"
                     ShowColumnMenu="true"
                     FilterMode="GridFilterMode.FilterMenu"
                     OnStateInit="@( (GridStateEventArgs<Product> args) => RestoreGridState(args) )">
            <GridColumns>
                <GridColumn Field=@nameof(Product.Name) Title="Product Name" />
                <GridColumn Field=@nameof(Product.Price) Title="Price" />
                <GridColumn Field=@nameof(Product.Quantity) Title="Units In Stock" />
            </GridColumns>
        </TelerikGrid>
    }
}

@code {
    TelerikGrid<Product> VirtualGrid;
    List<Product> GridData { get; set; }
    bool ShowGrid = true;
    GridState<Product> VirtualGridState;
    int RowHeight = 48;
    List<int> RowHeights = new() { 48, 96 };

    async Task RestoreGridState(GridStateEventArgs<Product> args)
    {
        if (VirtualGridState != null)
        {
            args.GridState = VirtualGridState;
        }
    }

    async Task RepaintGrid(int newRowHeight)
    {
        VirtualGridState = VirtualGrid.GetState();
        ShowGrid = false;
        await Task.Delay(1);
        RowHeight = newRowHeight;
        ShowGrid = true;
    }

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

        for (int i = 1; i <= 1000; i++)
        {

            GridData.Add(new Product()
            {
                ID = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                Quantity = (short)rnd.Next(1, 100)
            });
        }
    }

    public class Product
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public short Quantity { get; set; }
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.