I had a working server-side Blazor project that was working, but a problem appears to have begun without me changing any code. I upgraded to the latest version (2.4.0) and am having the same problem.

The SelectedItemsChanged event is not working when a checkbox is checked. If I click outside the checkbox in the same column, the event fires however.

I see similar behavior on your own demo page, so this seems like a bug: https://demos.telerik.com/blazor-ui/grid/selection Check some products on that grid and the selected items do not change below. I've tested this in Vivaldi and Edge.

Thanks,
Sean

Hello!

The multiple selection functionality in the grid no longer works as expected.

The select check boxes doesn't seem to do anything and the only way to select something is when clicking on the actual row.

The problem is also present on your demo page.

ADMIN EDIT: Duplicate of https://feedback.telerik.com/blazor/1443720-selection-does-not-work-when-clicking-on-the-checkbox-works-when-clicking-the-row

https://demos.telerik.com/blazor-ui/grid/selection?_ga=2.224802330.1814754023.1575533932-806712588.1566825973&_gac=1.19805898.1574257348.Cj0KCQiA5dPuBRCrARIsAJL7oejqGKCIKhHZYlO3abQIbwwTOsvIVlWTqJ7CCdov38W-l8cArPTRpjEaAt0jEALw_wcB

Best regards.

Hi,

when scrolling all the way down on a grid and then using horizontal scroll, grid is scrolled vertically a bit.

Here is the video

https://drive.google.com/file/d/16GXvUO9Q9kTI2MSkn2t8_9-2ZBn44QO6/view?usp=sharing

Best regards,

Robert

There's a bug when using the popup mode and adding a record

https://demos.telerik.com/blazor-ui/grid/editing-popup

1. Click 'Add Employee'
   
2. Click the X at the top right of the modal popup
3. You are left with a row in the grid
   
   

I would like to request these features on the Blazor Grid:

• Add column pinning/freezing
• Add selectable column totals sum/min/max/count/avg functions and/or a way to define custom column totals calculations

Thanks.

This worked in 2.5.1.

Sample repro (focus the textbox and try moving the cursor with the left and right arrows)

<TelerikTabStrip>
    <TabStripTab Title="first tab">

        <TelerikTextBox Value="@TbValue"></TelerikTextBox>

        <input type="text" value="@TbValue" />

    </TabStripTab>
    <TabStripTab Title="second tab">another tab</TabStripTab>
</TelerikTabStrip>

@code{ 
    string TbValue { get; set; } = "lorem ipsum";
}

There is an issue with setting the Grid's Page property to values other than 1.

This is visible on the Blazor Demo for Grid Paging (https://demos.telerik.com/blazor-ui/grid/paging).

Initially the CurrentPage variable is set to 3, and thus the Page property on the Grid is set to 3. The Pager in the grid correctly shows Page 3 and the Pager Info is also correct, however, the data in the Grid is not filtered to the correct page. This can be seen by clicking Page 1 in the Pager (the data remains the same), and then clicking Page 3 in the Pager (the data changes, and is different than the initial data).

Video here

https://drive.google.com/file/d/12em-oc6xRJ_JjbFSANK9IqKDkK0f7p6y/view

Select an item in the grid and press and hold down arrow...

System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.TelerikGridBase`1.FocusPagerAsync()
   at Telerik.Blazor.Components.TelerikGridBase`1.FocusCellAsync(GridNavigationCommandEventArgs args)
   at Telerik.Blazor.Components.TelerikGridBase`1.FocusAdjacentCellAsync(GridNavigationCommandEventArgs args, Int32 rowIndexOffset, Int32 columnIndexOffset)
   at Telerik.Blazor.Components.TelerikGridBase`1.FocusBottomCellAsync(GridNavigationCommandEventArgs args)
   at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteNavigationCommandAsync(GridNavigationCommandEventArgs args)
   at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteCommand(Object args)
   at Telerik.Blazor.Components.Grid.GridRowBase`1.OnExecuteCommand(GridCommandEventArgs commandArgs)
   at Telerik.Blazor.Components.Grid.GridDataCellBase`1.ExecuteCommandAsync(GridCommandEventArgs args)
   at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ExecuteNavigationCommandAsync(String commandName, Int32 rowIndexOffset, Int32 columnIndexOffset, KeyboardEventArgs args)
   at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ProcessKeyDown(KeyboardEventArgs args)
   at Telerik.Blazor.Components.Grid.GridContentCell`1.ProcessKeyDown(KeyboardEventArgs args)
   at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.OnKeyDown(KeyboardEventArgs args)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Hiding a grid column causes data columns to be misaligned with headers.

The issue can be reproduced by clicking the "Show/Hide Summary Column" button in the following demo:

https://demos.telerik.com/blazor-ui/grid/columns?_ga=2.267353678.1156651629.1582659795-849992649.1561742093&_gac=1.10628864.1582231358.EAIaIQobChMIvOnSjf_g5wIVFbvsCh2MAgevEAAYASAAEgLEYvD_BwE

I want to expand on another feature request regarding grid excel behaviour.

Like in excel moving into cell enables edit mode. Using arrow keys or enter key moves out of edit mode and do an automatic update of cell. Escape cancels the editing.

With Wpf you have can extend the grid behaviour in order to do things like moving to the beginning of first column of next row when you are on the last column of row and you press the right arrow / tab / enter key

Likely related to https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models 

Issue - Filtering / Sorting on a column that is bound to a complex object fails to generate the proper OData string.

Example Grid Code, three columns, column 1 and 3 are bound to a complex class, column 2 just a string:

<TelerikGrid Data=@sysVars.Dtos Pageable="true" Sortable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" PageSize="20" TotalCount=@sysVars.Count OnRead=@ReadItems>
        <GridColumns>
            <GridColumn Field=@nameof(SysVar.SysVarType.Name) Title="Type" Editable="false">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.SysVarType.Name
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Value) Title="Value">
                <Template>
                    @{
                        var data = context as SysVar;
                        var link = SysVarDto.FrontEndEditUrl(data.Id.Value);
                        <NavLink href=@link>@data.Value</NavLink>
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Hierarchy.Description) Title="Hierarchy">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.Hierarchy.Description
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>

The values bound to the grid are made up of a complex object.  For the sake of the example

 public class SysVar 
    {
        public string Value { get; set; }

        public Hierarchy Hierarchy { get; set; }

        public SysVarType SysVarType { get; set; }
}

public class Hierarchy 
{
      public string Description { get; set; }
}

public class SysVarType
{
      public string Name { get; set; }
}

Right now I know I can't have the Grid render SysVarType.Name, so I use a custom cell and everything works.  However, if I try to sort/filter on my complex columns, SysVarType or Hierarchy the resulting OData string that is generated is incorrect.

Example of what is should look like, from a Telerik Grid in my React application if I sort on the sysVarType column:

https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&$top=20&$orderby=value,sysVarType/name

Same string generated by the Telerik Grid in Blazor

https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&top=20&$orderby=Name

Note: I can't sort two columns at the same time, not a huge issue at this time.

What is failing is the $orderby= doesn't return sysVarType/name and only returns name, causing a 400 on my backend as the class SysVar doesn't have a name field.

TelerikGird with virtual scrolling was working in version 2.7, but after upgrading to 2.10, it is only showing placeholders.

When scrolling, it shows the values for a split second, but then those get replaced by the placeholders.

@page "/test"

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             ScrollMode="GridScrollMode.Virtual"
             Height="300px" RowHeight="20">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

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

    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
            });
        }
    }

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

Currently I need to define a custom JsonConverter to serialize the state of the grid.  I would prefer not to have to do this, however I understand that may just be the way things are for now.  Creating this ticket / issue to track if this is ever changed to not being needed.

For now I'll be setting up two serializers, one just for the grids that uses Newtonsoft, and the one I would prefer to use that uses System.Text.Json, https://github.com/Blazored/LocalStorage.

From https://docs.telerik.com/blazor-ui/components/grid/state 

// to store the serialized grid state, we need to have a custom serialized
// based on Newtonsoft.Json serialization. In the future this may not be required
public class FilterDescriptorJsonConverter : JsonConverter
{
///rest omitted
}
 

Hi, I'm looking to reproduce visual behavior with the Blazor WASM Gird that we've already standardized on in our implementation of the KendoReact Grid component.

one of the things we're doing that i'm not seeing yet in the Blazor Grid docs is rendering a triple-dot icon in the column header that clicks down to show a custom menu... looking around, the closest thing i see so far is the Blazor Grid support for a "Toolbar" header... that would probably work as a path forward but I wanted to ask if i was missing anything else more similar? or perhaps eventual plans.

or is there any facility to custom render the column header ourselves?

i'm including a screenshot example of what we've settled on so far after several iterations

Thank you! this Blazor wasm direction you're supporting is fantastic =)

Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()