Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 23 Oct 2019 07:13 by ADMIN
Release 2.2.1
Alek
Created on: 06 Aug 2019 07:37
Category: Grid
Type: Bug Report
2
Binding the Page index does not work when using OnRead

I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.

Reproducible:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
@using Telerik.DataSource.Extensions;
 
<TelerikNumericTextBox @bind-Value="@startPage"></TelerikNumericTextBox>
 
<TelerikGrid Data=@GridData TotalCount=@Total Page="@startPage"
             Filterable=true Sortable=true Pageable=true EditMode="inline">
    <TelerikGridEvents>
        <EventsManager OnRead=@ReadItems></EventsManager>
    </TelerikGridEvents>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Employee.ID) />
        <TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
    </TelerikGridToolBar>
</TelerikGrid>
 
There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.
 
@code {
    int startPage { get; set; } = 2;
 
    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;
 
    protected override void OnInit()
    {
        SourceData = GenerateData();
    }
 
    protected async Task ReadItems(GridReadEventArgs args)
    {
        Console.WriteLine("data requested: " + args.Request);
 
        //you need to update the total and data variables
        //the ToDataSourceResult() extension method can be used to perform the operations over the full data collection
        //in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data
 
        //await Task.Delay(2000); //simulate network delay from a real async call
 
        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
 
    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; }
    }
}

while the similar approach works without OnRead:

@using Telerik.Blazor.Components.Grid
@using Telerik.Blazor.Components.NumericTextBox
 
<TelerikNumericTextBox @bind-Value="@startPage" Min="1"></TelerikNumericTextBox>
 
<TelerikGrid Data="@MyData" Height="300px"
             Pageable="true" Sortable="true" Page="@startPage"
             FilterMode="Telerik.Blazor.FilterMode.FilterRow">
    <TelerikGridColumns>
        <TelerikGridColumn Field="@(nameof(SampleData.Id))" />
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </TelerikGridColumns>
</TelerikGrid>
 
@code {
    int startPage { get; set; } = 2;
 
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

1 comment
ADMIN
Marin Bratanov
Posted on: 16 Sep 2019 06:33

Hi Alek,

We are working on this and it will hopefully get implemented for the upcoming 2.0.0 version. It will require the @bind-Page="@startPage" approach, though.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category