Horizontal scrolling does not reach the end in Smart.Blazor Grid

[Duong Quyet]

When using the Smart.Blazor Grid component and pinning the first column (for example, by setting Freeze=”far” or visually freezing the first column), the horizontal scrollbar stops too early, and the last column is not fully visible.

IMG Errdetail

@page "/grid-freeze-column-last"
@using System
@using System.Collections.Generic
@using Smart.Blazor

<style>
    body,
    html,
    app {
        height: 100%;
    }

    app {
        overflow: auto;
    }

    .content {
        height: calc(100% - 70px);
    }

    /* Responsive */
    @@media only screen and (max-width: 700px) {
        smart-grid {
            width: 100%;
        }
    }
</style>

<p>Pin the last Column in the Grid web component.</p>

@if (dataRecords == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <Smart.Blazor.Grid DataSource="dataRecords" >
        <Columns>
            <Column DataField="FirstName" Label="First Name" Width="200" Freeze="true" ></Column>
            <Column DataField="LastName" Label="Last Name" Width="percentageWidth"></Column>
            <Column DataField="ProductName" Label="Product" Width="percentageWidth"></Column>
            <Column DataField="Quantity" Label="Quantity" DataType="number"
                    Align="Smart.Blazor.HorizontalAlignment.Right"
                    CellsAlign="Smart.Blazor.HorizontalAlignment.Right"
                    Width="percentageWidth"></Column>
            <Column DataField="Price" Label="Unit Price" DataType="number"
                    Align="Smart.Blazor.HorizontalAlignment.Right"
                    CellsAlign="Smart.Blazor.HorizontalAlignment.Right"
                    CellsFormat="c2"
                    Width="percentageWidth"></Column>
            <Column DataField="Total" Label="Total" DataType="number"
                    Align="Smart.Blazor.HorizontalAlignment.Right"
                    CellsAlign="Smart.Blazor.HorizontalAlignment.Right"
                    CellsFormat="c2"
                    Width="percentageWidth"
                   >
            </Column>
        </Columns>
    </Smart.Blazor.Grid>
}

@code {
    private List<DataRecord> dataRecords;

    private string percentageWidth = "25%";

    protected override void OnInitialized()
    {
        base.OnInitialized();
        var dataService = new RandomDataService();
        dataRecords = dataService.GenerateData(3000);
    }

    // ======= Fake Data Service & Model =======
    public class DataRecord
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ProductName { get; set; }
        public int Quantity { get; set; }
        public decimal Price { get; set; }
        public decimal Total => Quantity * Price;
    }

    public class RandomDataService
    {
        private static readonly string[] FirstNames = new[]
        {
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi",
            "Antoni", "Mayumi", "Ian", "Peter", "Lars",
            "Petra", "Martin", "Sven", "Elio", "Beate",
            "Cheryl", "Michael", "Guylene"
        };

        private static readonly string[] LastNames = new[]
        {
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase",
            "Saavedra", "Ohno", "Devling", "Wilson", "Peterson",
            "Winkler", "Bein", "Petersen", "Rossi", "Vileid",
            "Saylor", "Bjorn", "Nodier"
        };

        private static readonly string[] ProductNames = new[]
        {
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso",
            "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano",
            "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        };

        private readonly Random random = new();

        public List<DataRecord> GenerateData(int count = 100)
        {
            var data = new List<DataRecord>();

            for (int i = 0; i < count; i++)
            {
                var firstName = FirstNames[random.Next(FirstNames.Length)];
                var lastName = LastNames[random.Next(LastNames.Length)];
                var productName = ProductNames[random.Next(ProductNames.Length)];
                var quantity = random.Next(1, 20);
                var price = Math.Round((decimal)(random.NextDouble() * 50 + 5), 2);

                data.Add(new DataRecord
                {
                    FirstName = firstName,
                    LastName = lastName,
                    ProductName = productName,
                    Quantity = quantity,
                    Price = price
                });
            }

            return data;
        }
    }
}

• This topic was modified 1 day, 1 hour ago by Duong Quyet.

[Author]

Posts