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 week, 3 days ago by Duong Quyet.

[Markov]

Hi,

We could not reproduce the provided behavior using the current version of Smart.Blazor. In our tests, we tested with various setups like freezing the first column, the last column, the first and the last column, setting different widths of the Grid. Please, send a complete demo to support@jqwidgets.com as there could be some additional factors which may be the reason of the behavior reported here.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Duong Quyet]

Hi Markov,

I’ve found the cause of the issue. It happens when I add the following line to the <head> section of my _Host.cshtml file:

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" crossorigin="anonymous"></script>

After including this Font Awesome script, the horizontal scrollbar of the Smart.Blazor Grid stops too early and the last column becomes partially hidden. When I remove this script, the Grid scrolls correctly.

I’m not sure why this script interferes with the Grid’s layout, but that’s what triggers the issue.

• This reply was modified 1 week ago by Duong Quyet.

[Author]

Posts