Duplicated
Last Updated: 06 Oct 2023 07:00 by ADMIN
Hannes
Created on: 27 Oct 2021 08:09
Category: Grid
Type: Bug Report
1
Grid border misalignment after browser zoom change

Hello,

The Grid header and data cells become misaligned if the user changes the page zoom level. The right padding of the Grid header area resizes, according to the zoom level, but the scrollbar width remains the same. This triggers the misalignment.

The problem disappears after browser refresh at the current zoom level.

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Dimo
Posted on: 06 Oct 2023 07:00

Everyone who is experiencing this - a possible workaround is to recreate the Grid after page zoom.

In the example below, do the following:

  • Replace Index with the actual name of your Razor file.
  • Move the JavaScript code outside the Razor file to a separate JS file.
  • Adjust the Task.Delay() duration, according to your preferences.
  • Adjust the <div> height or remove the <div> altogether if you prefer to display the loading overlay over the whole page.
@inject IJSRuntime js

@implements IDisposable

<div style="position:relative;height:300px">
    @if (RecreatingGrid)
    {
        <TelerikLoaderContainer />
    }
    else
    {
        <TelerikGrid Data="@GridData"
                     TItem="@Product"
                     Pageable="true"
                     Sortable="true"
                     FilterMode="GridFilterMode.FilterRow"
                     Height="100%">
            <GridColumns>
                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
                <GridColumn Field="@nameof(Product.Price)" />
                <GridColumn Field="@nameof(Product.Stock)" />
                <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
                <GridColumn Field="@nameof(Product.InProduction)" />
            </GridColumns>
        </TelerikGrid>
    }
</div>

<script suppress-error="BL9992">
    var dotNet;
    var zoomLevel = (window.outerWidth / window.innerWidth) * 100;

    function attachZoom(dotNetReference) {
        dotNet = dotNetReference;
        window.addEventListener("resize", onResize);
    }

    function onResize(e) {
        var newZoomLevel = (window.outerWidth / window.innerWidth) * 100;
        if (newZoomLevel != zoomLevel) {
            zoomLevel = newZoomLevel;
            dotNet.invokeMethodAsync("RecreateGrid");
        }
    }
</script>

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

    private DotNetObjectReference<Index>? DotNetRef;

    private bool RecreatingGrid { get; set; }

    [JSInvokable("RecreateGrid")]
    public async Task RecreateGrid()
    {
        RecreatingGrid = true;
        StateHasChanged();
        await Task.Delay(300);
        RecreatingGrid = false;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("attachZoom", DotNetRef);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    protected override void OnInitialized()
    {
        DotNetRef = DotNetObjectReference.Create(this);

        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Price = (decimal)rnd.Next(1, 100),
                Stock = rnd.Next(0, 50),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                InProduction = i % 3 == 0
            });
        }
    }

    public void Dispose()
    {
        DotNetRef?.Dispose();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool InProduction { get; set; }
    }
}