Unplanned
Last Updated: 18 Jul 2024 08:51 by cvuas
cvuas
Created on: 18 Jul 2024 08:51
Category: Grid
Type: Bug Report
1
Grid does not scroll to top when adding a new row with locked columns

The Grid automatically scrolls to top when adding a new item in inline or incell edit mode. However, when the Grid has locked (frozen) columns, this scrolling doesn't occur.

Here is a test page with a JavaScript workaround in the OnAdd event:

@using System.ComponentModel.DataAnnotations

@inject IJSRuntime js

<label><TelerikCheckBox @bind-Value="@EnableScrollWorkaround" /> Enable Workaround</label>

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAdd"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate"
             Width="700px"
             Height="400px"
             Class="grid-class">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Width="200px" Locked="true" />
        <GridColumn Field="@nameof(Product.Price)" Width="200px" />
        <GridColumn Field="@nameof(Product.Quantity)" Width="200px" />
        <GridCommandColumn Width="200px" Locked="true">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">

    function scrollGridToTop() {
        var gridContentArea = document.querySelector(".grid-class .k-grid-content");
        if (gridContentArea) {
            gridContentArea.scrollTop = 0;
        }
    }

</script>

@code {
    private bool EnableScrollWorkaround { get; set; } = true;

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

    private int LastId { get; set; }

    private async Task OnGridAdd(GridCommandEventArgs args)
    {
        if (EnableScrollWorkaround)
        {
            await js.InvokeVoidAsync("scrollGridToTop");
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                Quantity = (short)Random.Shared.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
                IsActive = LastId % 4 > 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

0 comments