Unplanned
Last Updated: 03 Jul 2020 10:59 by Marvin
Marin Bratanov
Created on: 03 Feb 2020 08:32
Category: Grid
Type: Bug Report
11
Grid horizontal scroll is disabled when no data items are rendered

When you scroll to the right in a grid and filter so that there are no items, the horizontal scroll disappears and you can no longer come back to the filter in order to clear it and work with the grid again.

6 comments
Marvin
Posted on: 03 Jul 2020 10:59

Hi Marin,

thanks for your detailed explanation and examples. I choose to use your "dirty" hack as I did not want to modify our existing grid logic. 

As we have a flexible gird which can contain any amount of columns I adjusted the code a bit and calculated the grid width in code behind and assigned it to the min-width as a variable.

This now works flawlessly. Thanks again Marin for your help, appreciate it.

     <style>
                    .force-scroll .k-grid-content .k-height-container {
                        min-width: @(GridWidth + "px"); /* matches the total column width in pixels */
                        height: 1px;
                    }
     </style>
ADMIN
Marin Bratanov
Posted on: 02 Jul 2020 19:48

Hi Marvin,

Using the OnRead event to implement the data source operations manually (our extension methods can do it for you too, see here), lets the grid know when there is no data, so it shows the "No data available" message, which gives it a row, which brings back the scrollbars.

Here's a basic example:

<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems Groupable="true" Resizable="true" Reorderable="true"
             FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true  Width="800px" Height="400px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.ID) Width="600px" />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" Width="600px" />
        <GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" Width="600px" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
</TelerikGrid>

@code {
    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;

    protected override void OnInitialized()
    {
        SourceData = GenerateData();
    }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);

        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }

    //This sample implements only reading of the data. To add the rest of the CRUD operations see
    //https://docs.telerik.com/blazor-ui/components/grid/editing/overview

    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }

        return result;
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Another option is to hack through the grid elements a little with CSS like so:

    .force-scroll .k-grid-content .k-height-container {
        min-width: 1800px; /* matches the total column width in pixels */
        height: 1px;
    }

where the CSS width matches the total of the columns width - this is based on the previous sample, but without OnRead:

<TelerikGrid Data=@SourceData Class="force-scroll" Groupable="true" Resizable="true" Reorderable="true"
             FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true  Width="800px" Height="400px">

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Marvin
Posted on: 02 Jul 2020 12:06

Hi, is there an alternative workaround except setting navigable to true, because with columnVirtualization enabled, I cannot use this option.

This is really frustrating as we have some Grids in use, which contain more than 40 columns and 1000+ rows. I know this is not an ideal setup, but it works very well except for this annoying bug. As of the large amount of data columnVirtualization  is a must have feature and cannot be disabled.

The workaround we currently use is a ResetFilter button, but this will reload the page and like I described there is a lot of data to process and render, which takes some time.

 

Nick
Posted on: 24 Jun 2020 16:06
Unfortunately you can't use Navigable="true" with column virtualization (which is needed with a lot of columns). As an ugly work around until it's fixed I added a button that sets the grid state to null and that worked.
ADMIN
Marin Bratanov
Posted on: 19 Mar 2020 10:14

Hello Simon,

The best option I can offer is to set Navigable="true" so the user can use the keyboard to move left and right through the column headers and filters to see what filter is applied.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Simon
Posted on: 19 Mar 2020 09:33
Is there a workaround for this issue at the moment?