How to show PageSize control and Pagination on Toolbar.

[Suprabhat Biswal]

I'm doing a Blazor POC using syncfusion. As of now I have used a data-grid to see if it meets my requirement for list some contact data. So far it has most of the feature that I need for my actual project however I also need all control shown in footer to be a part of header instead e.g Pagination, Page Size, Record Count etc. Is is possible to show footer control in toolbar/header instead?

[Renjith Singh Rajendran]

Hi Suprabhat,  

 

Greetings from Syncfusion support.  

 

We don’t have direct support to render the Pager control at the top of the Grid. but we have achieve your requirement by calling a JavaScript function using JSInterop in DataBound event of Grid to insert the Pager Control on top of grid using JavaScript function. Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowGrouping="true" Toolbar=@Tool AllowPaging="true"> 

    <GridPageSettings PageSizes="true"></GridPageSettings> 

    <GridEvents DataBound="DataBound" TValue="Order"></GridEvents> 

. . . . . . . . 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public async Task DataBound() 

    { 

        await Runtime.InvokeVoidAsync("RenderPagerTop", Grid.ID, Grid.AllowGrouping, Grid.Toolbar); 

    } 

. .. .. . .. . . 

 

  function RenderPagerTop(id,enabledGrouping, toolbar) {        var grid = document.getElementById(id);    var pager = document.getElementsByClassName('e-gridpager');    var topElement;    if (enabledGrouping || toolbar) {        topElement = enabledGrouping ? document.getElementsByClassName('e-groupdroparea') :            document.getElementsByClassName('e-toolbar');    } else {        topElement = document.getElementsByClassName('e-gridheader');    }    grid.insertBefore(pager[0], topElement[0]);}

 

 

Refer the below screenshot for your reference 

 

 

 

Kindly download the sample from below 

Sample: https://www.syncfusion.com/downloads/support/directtrac/286825/ze/BlazorApp1729601557  

 

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/events/#databound  

 

Please get back to us if you have further queries.  

    

Regards, 

Renjith Singh Rajendran