Pending Review
Last Updated: 05 Mar 2021 00:40 by Doug
Created by: Doug
Comments: 0
Category: Grid
Type: Bug Report
0

When you resize grid columns the column width does not follow the mouse. This occurs in your demo:

 

https://demos.telerik.com/blazor-ui/grid/column-resizing

 

Make a column wider or narrower and the column width does not stay in line with where the mouse is.

Declined
Last Updated: 04 Mar 2021 14:50 by Liero
---

ADMIN EDIT

This is not a bug but behavior that was documented during the investigation of this case. Review the thread for more details.

---



asynct Task ContextMenuClick(ContextMenuItem) {
var state = Grid.GetState(); state.FilterDescriptors.Add(new FilterDescriptor { Member = "Created", Operator = FilterOperator.IsEqualTo, Value = "Administrator" }); await Grid.SetState(state);
}


 

How it should look like:

 


Unplanned
Last Updated: 03 Mar 2021 06:51 by ADMIN
Created by: René
Comments: 14
Category: Grid
Type: Feature Request
8

With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.

Is there a way to scroll up by code until this is fixed ???

Completed
Last Updated: 02 Mar 2021 17:55 by ADMIN
Release 2.22.0
At the moment, clicking a row always alters the selection. I want to use only the GridCheckboxColumn for selection so row clicks don't change it.
Unplanned
Last Updated: 02 Mar 2021 12:43 by ADMIN

When using row virtualization, the visible rows are miscalculated when the browser zoom is used (hold control with mouse scroll). 

The result of the miscalculation is that the first row at some point is not visible.

To reproduce the problem you should scroll to the top of the grid and see the first row.

Then start to zoom down and see how the first row is displaced.

Seems like only 50%, 100%, 150%, 200% (multiply of 50%) are calculated correctly in row virtualization

 

<AdminEdit>

You can reproduce the bug with the attached code.

It's browser-specific and is appearing only in chromium browsers.

It could be related to the way browsers calculate the size of the elements when zooming.

Currently, there is an open bug in the chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1048147&q=component%3AUI%3EBrowser%3EZoom%20height&can=2 

</AdminEdit>

 

Completed
Last Updated: 01 Mar 2021 08:30 by ADMIN
Release 2.23.0

Data load in background thread with selected row on UI crashing application when there is selection

 

1. Select a row
2. Click the button
3. check the server console and/or try to do something else

@using System.Collections.ObjectModel

<TelerikGrid @ref="@Grid"
             Data="@GridData"
             SelectionMode="@GridSelectionMode.Single"
             OnRowClick="@OnRowClickHandler"
             @bind-SelectedItems="@SelectedData"
             EditMode="@GridEditMode.Incell"
             Resizable="true"
             Width="100%"
             Height="200px"
             Reorderable="true"
             Groupable="false"
             ShowColumnMenu="false"
             FilterMode="@GridFilterMode.None"
             Sortable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ViewModel.Name) Editable="false">
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<TelerikButton OnClick="RefreshButtonClick">Refresh</TelerikButton>

@code {
    private const int RowHeight = 40;
    private const string Height = "700px";
    private const int PageSize = 20;

    private ObservableCollection<ViewModel> GridData { get; set; } = new ObservableCollection<ViewModel>();
    private IEnumerable<ViewModel> SelectedData { get; set; } = Enumerable.Empty<ViewModel>();

    private TelerikGrid<ViewModel> Grid { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadData();

        await base.OnInitializedAsync();
    }

    async Task LoadData()
    {
        var data = Enumerable.Range(1, 5).Select(x => new ViewModel { Name = $"name {x}" });
        GridData = new ObservableCollection<ViewModel>(data);
    }


    private async Task RefreshButtonClick()
    {
        Console.WriteLine("reload data");

        // spawn a new thread, a Timer will do as well
        await Task.Run(() =>
        {
            IEnumerable<ViewModel> data = new List<ViewModel> { new ViewModel { Name = "1" }, new ViewModel { Name = "2" }, new ViewModel { Name = "3" } };

            this.GridData.Clear();
            this.GridData.AddRange(data);
        });
    }

    private void OnRowClickHandler(GridRowClickEventArgs args)
    {
        Console.WriteLine("click to select");
        ViewModel viewModel = (ViewModel)args.Item;
        //this is here because of theincell editing, not relevant to the issue
        SelectedData = new List<ViewModel>() { viewModel };
    }

    public class ViewModel
    {
        public ViewModel()
        {
        }

        private string name;
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
            }
        }
    }
}

Unplanned
Last Updated: 26 Feb 2021 07:15 by ADMIN
I am using a Grid with InCell editing mode and I have a boolean column when I click on that column the editor opens, but when I click somewhere else (non-editable cell) the edit mode is not closed. For columns of other types (string, numeric, etc.) it closes.
Declined
Last Updated: 25 Feb 2021 19:44 by ADMIN
Created by: Andrzej
Comments: 2
Category: Grid
Type: Feature Request
0

Hi,

Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding

I am already using your do-it-yourself example but IMHO it is too much code

Regards

Andrzej

Unplanned
Last Updated: 25 Feb 2021 19:19 by ADMIN
Created by: Werner
Comments: 3
Category: Grid
Type: Feature Request
9
I would like to put my "Add new record" button there (which requires this) so that I don't have to use the toolbar - this will let me conserve vertical space.
Unplanned
Last Updated: 24 Feb 2021 09:30 by ADMIN
Created by: Armineh
Comments: 4
Category: Grid
Type: Feature Request
6
I want to reduce length of pagination selection below the grid  ( currently is showing as   << 1  2 3 4 5 6 7 8 9 10 ...>>     but I want to have it like << 1 2 3 ....>>)
Unplanned
Last Updated: 23 Feb 2021 12:26 by Oemer
Created by: Nick
Comments: 8
Category: Grid
Type: Feature Request
17

Hi,

I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?

See attached image.

 

Thanks,

Nick

Planned
Last Updated: 22 Feb 2021 13:35 by ADMIN
Right now, virtual scrolling can show two loading signs - the large spinner for the entire grid, and the placeholder on each row. It should not show the large spinner with virtualization.
Unplanned
Last Updated: 20 Feb 2021 10:39 by ADMIN

---

ADMIN EDIT

Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:

@inject IJSRuntime _js

@*You should move this to a proper place for scripts,
 suppressing the error like this is just a hack to keep this sample code concise*@
<script suppress-error="BL9992">
    function uncheckGrid(parentElem) {
        var checkboxes = parentElem.querySelectorAll(".k-checkbox.k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<div @ref="@ParentElem">
    <TelerikGrid Data=@GridData
                 SelectionMode="@GridSelectionMode.Multiple"
                 SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
                 SelectedItems="@SelectedEmployees"
                 Pageable="true"
                 Height="400px">
        <GridColumns>
            <GridCheckboxColumn />
            <GridColumn Field=@nameof(Employee.Name) />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
        </GridColumns>
    </TelerikGrid>
</div>
@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    ElementReference ParentElem { get; set; }


    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    protected void OnSelect(IEnumerable<Employee> employees)
    {
        bool flag = true;
        foreach (Employee item in employees)
        {
            if(item.EmployeeId % 3 == 0)
            {
                flag = false;
            }
        }
        if (flag)
        {
            SelectedEmployees = employees;
        }
        else
        {
            SelectedEmployees = Enumerable.Empty<Employee>();
            _js.InvokeVoidAsync("uncheckGrid", ParentElem);
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

---

Unplanned
Last Updated: 18 Feb 2021 13:05 by ADMIN

I am using EF on my backend and when I group I get an error like this one:

Unhandled exception rendering component: Processing of the LINQ expression '(GroupByShaperExpression:
      KeySelector: (t.FirstName), 
      ElementSelector:(EntityShaperExpression: 
          EntityType: Customer
          ValueBufferExpression: 
              (ProjectionBindingExpression: EmptyProjectionMember)
          IsNullable: False
      )
      )' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
System.InvalidOperationException: Processing of the LINQ expression '(GroupByShaperExpression:
KeySelector: (t.FirstName), 
ElementSelector:(EntityShaperExpression: 
    EntityType: Customer
    ValueBufferExpression: 
        (ProjectionBindingExpression: EmptyProjectionMember)
    IsNullable: False
)
)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
   at Microsoft.EntityFrameworkCore.Query.Internal.RelationalProjectionBindingExpressionVisitor.VisitExtension(Expression extensionExpression)
   at System.Linq.Expressions.Expression.Accept(ExpressionVisitor visitor)

 

and a lot more line through the EF Core expression classes.

-----

ADMIN EDIT

At the moment, it looks like there is an issue between EF, LINQ and GroupBy expressions that seems to be the origin of this. In a profiler, you can see that running a group expression does not even run a query against the database itself - this is the origin of the problem, and the subsequent paging operation is where an actual exception is thrown, but it points to the field that was used for grouping.

Considering that grouping has to pull all the data anyway, materializing the data from an IQueriable to an IEnumerable should solve the issue, even though it can be a performance hit - for relatively small data sets it may not be a significant problem.

    protected override void OnInitialized()
    {
        GridData = ProductService.GetProducts().ToList();
    }

 

----

Unplanned
Last Updated: 18 Feb 2021 12:16 by ADMIN

Using the Excel Export for Grid creates the Excel file, but on opening it, the columns that contain data are hidden. Unless I unhide the columns, the sprceadsheet looks empty.

---
ADMIN EDIT:
One idea to go about this is to expose an event that would allow users to modify the column width values before they get sent for export. The benefit of this approach is that if the columns are resized, the user will receive their current size in the specified unit e.g. rem, em or % and will be able to set the width in px.
---
Completed
Last Updated: 18 Feb 2021 07:01 by ADMIN
Release 2.22.0

I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.

---

ADMIN EDIT

The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.

---

Unplanned
Last Updated: 17 Feb 2021 15:35 by Liero
Created by: Liero
Comments: 1
Category: Grid
Type: Feature Request
3

I need to know which cell the user right clicked on so I can adjust my context menu. I need the cell value, the row model and the field of the column.

---

ADMIN EDIT

The following KB article shows a solution you can use immediately: https://docs.telerik.com/blazor-ui/knowledge-base/grid-which-cell-context-menu.

---

Unplanned
Last Updated: 17 Feb 2021 10:29 by ADMIN
1. Use a touch device (or emulate one in Chrome DevTools)
2. Open the reordering demo
3. try to reorder columns
Unplanned
Last Updated: 17 Feb 2021 09:34 by ADMIN
Created by: Rick
Comments: 0
Category: Grid
Type: Feature Request
1

My grid starts with Groupable=false and at some point I may need to make it groupable. The group panel appears, but I cannot drag the column headers to it to actually group.

---

ADMIN EDIT

A workaround is to hide the grid so it can re-initialize with the new groupable setting:

Is Groupable: @IsGroupable
<TelerikButton OnClick="@ToggleGroupable">Toggle Groupable</TelerikButton>

@if (isGridVisible)
{
    <TelerikGrid Data=@GridData @ref="@GridRef" Groupable="@IsGroupable" Pageable="true" Height="400px">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
            <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
        </GridColumns>
    </TelerikGrid>
}

@code {
    bool IsGroupable { get; set; }
    bool isGridVisible { get; set; } = true;
    TelerikGrid<Employee> GridRef { get; set; }
    async Task ToggleGroupable()
    {
        //save state (sorting, paging,...) - it will be lost when we hide the grid
        var state = GridRef.GetState();

        //hide the grid so it can later re-initialize with the new groupable setting
        isGridVisible = false;
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        IsGroupable = !IsGroupable;
        isGridVisible = true;

        //afte the grid re-initialized and rendered with the new setting, restore its state
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        await GridRef.SetState(state);
    }


    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

---

1 2 3 4 5 6