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()

I am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:

@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
    Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
              Groupable="true">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :

Please let me know if you need anymore details.

when setting a default filter in code the grid does not show any type of indicator that a filter is applied to a column

desiredState = newGridState<Employee>()
            {
                FilterDescriptors = newList<FilterDescriptorBase>()
                {
                    newCompositeFilterDescriptor()
                    {
                        FilterDescriptors = newFilterDescriptorCollection()
                        {
                            newFilterDescriptor() { Member = "Active", Operator = FilterOperator.IsEqualTo, Value = true, MemberType = typeof(bool) }
                        }
 
                    }
                }
            };

 
 
     

With using the Grid, I have several GridCommandButtons. Instead of displaying the button with an icon followed by text, I wanted to display just the icon and use the TelerikTooltip to display the text on hover. When I set the GridCommandButton.Title and inspect the DOM, there is no title attribute on the button even though the description of the GridCommandButton.Title property reads "The title attribute of the Button".

it would be helpful to have the ability to set Class attribute for rendered TD.

this would allow for example to set a background color for a column

I'm using the Grid with a GridToolbar containing a GridSearchBox.  I have the following requirement that I wish to be able to implement:

When focus is on the GridSearchBox and I hit Esc I would like to clear the search text.

I'm using the OnRead / OnCreate / OnUpdate / OnDelete events of the TelerikGrid. Most examples do not use OnRead to load data, instead using OnInitializedAsync().

When performing an update two events will fire, such as OnCreate and then OnRead to reload the grid data - which makes sense. The problem is OnRead is not awaited, so in effect the Read method can reload the data prior to data being updated on the server. This is especially the case if I have a JavaScript delete confirmation prompt.

What's my best way forward? Not use OnRead and use OnInitializedAsync instead? Somehow trigger OnRead again (which would effectively trigger it twice)?

Thanks,

Dave

Can you either fix the Export functionality to apply Custom footers that are not aggregated to the exported data or Change Enum options to add a Custom type to allow custom footer template values to be exported along with the other GrigAggregates?