Hello,

I would like to apply server-side pagination and display data in a grid. I am using Blazor and data is being fetched via an api request.

Already implemented:

Each api request brings a "requestResponse" which will contain "totalPages" and the "data" (the records). The "totalPages" is calculated on the server side based on the total number of records and page size. The page size is always 50 in this case. So e.g. if there are 400 records in a collection, the request will fetch: "totalPages" = 8, data = 50 records.

What I want to achieve: 

The final result should be a grid which is pageable. The grid should display number of pages equal to the "totalPages" from the api response. Each click on a page should trigger another api request (ideally fire an event that calls a method that takes as an argument the page number).

I saw documentation about OnRead event: https://docs.telerik.com/blazor-ui/components/grid/manual-operations but I couldn't make it work as when the component is initialized, the event doesn't fire. I cannot fire it within OnInitializedAsync() as I would need to pass GridReadEventArgs to the event and that is not possible in OnInitializedAsync() when the component is first initialized. If I'm not using GridReadEventArgs  as argument, then how would the grid know the "totalPages"?

Am I going in the right direction with OnRead? Is there another way, perhaps trigger the api within a PageChanged event? Then how would I be able to set the desired number of pages?

Any help would be appreciated.

Thank you.

Kind regards,

Astig

Hello! I've looked all over for a solution to my problem but couldn't find it. So, here's my issue:

This is my RadEditor with the options I need enabled. Right now, my browser has its zoom at 100%. When I click to change the color of the text or my back color, it shows up just fine under the icon. Plus, choosing the colors changes the text as it should.

The problem starts whenever I change my zoom. The options break, move to the extreme of the screen, and selecting colors doesn't change my text. It's completely random too; sometimes it'll break at 90%. Sometimes at 125%. It's an issue because my clients prefer not to use 100% in other pages and we don't know how to solve this problem.

Please help!

As show in the screenshot the output is "1 of 0" in the pagination section of the telerik grid when Data is null or empty meaning no records available. 

I tried to make it 0 while its running but couldn't as the input field is allowing value > 0 only, I guess. Is there an easy or quick solution for this?

Or may be I am doing something wrong. below is my code.

@* Set initial page index, and keep it updated with the grid state to prevent it from resetting the grid page index on re-renders *@

<TelerikGrid Data="@MyData" Pageable="true" @bind-PageSize="@PageSize" Height="300px"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" @bind-Page="@PageIndex">
      <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="10"
                           Adaptive="true"
                           Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    protected List<int?> PageSizes { get; set; } = null; //new List<int?> { null, 15, 30, 50 };
    int PageIndex { get; set; } = 0;
    int PageSize { get; set; } = 10;

// I have tried it with Pagechanged event as well instead of 2-way data binding but it didn't worked. 
    async Task PageChangedHandler(int currPage)
    {
        if(MyData == null || !MyData.Any())
            PageIndex = 0;
        else 
            await Task.Run(() => PageIndex = currPage);
        // when using one-way binding for the Page parametr, make sure to update it in the PageChanged event
    }

    public IEnumerable<object> MyData = Enumerable.Empty<object>(); 
        
}

<TelerikGrid Data="@GetRows()" TItem="DataRow" PageSize="5">
    <GridColumns>
        @foreach (DataColumn column in dataTable.Columns)
        {
            <GridColumn Field="@column.ColumnName" Title="@column.ColumnName" />
        }
    </GridColumns>
</TelerikGrid>

@code {
    private DataTable dataTable;

    protected override void OnInitialized()
    {
        dataTable = new DataTable("MyDataTable");
        dataTable.Columns.Add("ID", typeof(int));
        dataTable.Columns.Add("Name", typeof(string));
        dataTable.Rows.Add(1, "John");
        dataTable.Rows.Add(2, "Jane");
    }

    private IEnumerable<DataRow> GetRows()
    {
        return dataTable.Rows.Cast<DataRow>();
    }
}   

this code not working .Is there any other ways?

Hi,

I'm new to Telerik Web Reporting Designer (I finished implementing it today in my .NET Core project with Blazor) and realized I don't really know how to add a SQLite connection to it. The database is located in the .NET Core project folder but still doesn't work because apparently I'm missing an assembly called "System.Data.SQLite". To be honest I'm pretty lost so would appreciate a lot any kind of help. Also, I'm using Entity Framework Core.

I took one screenshot that might help you understand what's wrong:

https://gyazo.com/71df7aee22e405cdcdb96f0fb8adc549

Thanks a lot in advance.

Hi,

I want to delete this account.

This account was joined by someone hacking my email.
I do not use this service, so I'd like to delete my account.
However, I couldn't see the menu to delete the account.

I made the same inquiry through the Contact Us menu a month ago, but there was no response.
In the meantime, I found the forum and am requesting to delete my account.

But, even though I left a message on the forum, I still haven't received any help.

Please delete this account.

Thank you.

Sincerely yours,