1. Home
  2. Forum
  3. Blazor
  4. SfGrid: Possible to display ONLY top 10 rows?

SfGrid: Possible to display ONLY top 10 rows?

Hi,

I have a large dataset displayed in a SfGrid, which refreshes periodically. The requirement is to sort the grid with a descending/ascending sorting on a column, say 'SalesQuantity'. And I want the grid to display ONLY the top 10 rows. 


You might propose: from your database, only bring the top 10 rows. This works for sure. But the sortable columns are multiple, say 20. This will lead to code 20 different DB queries to bring me the suitable data. This lead me to ask question here, is it possible to achieve this with the graphic component?


Thanks,

Yi


7 Replies
RN Rahul Narayanasamy Syncfusion Team March 31, 2022 11:37 AM UTC

Hi Yi Han,


Greetings from Syncfusion.


We suspect that you want to get only the top 10 records from your database after sorting with multiple columns initially. You can achieve your requirement by using CustomAdaptor as a component or initial sorting. While using the CustomAdaptor way, you can send the SQL query(containing sorting and getting top records) to your database with a single request for fetching data and display it to the Grid.


Find the below documentation for your reference.


Reference:

https://blazor.syncfusion.com/documentation/datagrid/data-binding#sql-server-data-bindingsql-client


(Or)


You can try to define the Initial sorting operation to achieve this case from your end.


Reference:

https://blazor.syncfusion.com/documentation/datagrid/sorting#initial-sort


If it does not meet your requirement, then please more details about your requirement.


Please let us know if you have any concerns.


Regards,

Rahul


YH Yi Han April 5, 2022 09:12 AM UTC

Hi Rahul,


Thank you for your reply.


Unfortunately both options that you suggested do not meet my requirement. My requirement is:


1/ I don't know on which column the sorting will be applied in advance


2/ The `DataSource` of the grid is a cache (not from a DB query) containing > 2000 lines - this DataSource is also used for other use cases.


3/ when the sorting is applied on one column, I wan't to display only 10 items in the grid, accordingly to the sorting when user click on the sorting column.


Say it in another way, it's just like a grid with paging with a page size of 10. But the grid displays ONLY the first page.


Hope this clarifies my requirement.

Please suggest, Many thanks.


Yi






RN Rahul Narayanasamy Syncfusion Team April 7, 2022 03:50 AM UTC

Hi Yi Han,


Thanks for the update.


We are quite unclear about your requirement case. So we need some details regarding your reported query. Could you please share the below details which will be helpful to validate and provide a better solution?


  • How did you perform the sorting operation? By clicking the header of the column in the Grid? Or Did you perform the sorting operation differently?
  • How did you bind the data to the Grid?
  • Share full Grid code snippets.
  • After performing the sorting operation(by clicking the column header in the Grid), do you want to get the sorting column name while using CustomAdptor?
  • After performing the sorting operation(by clicking the column header in the Grid), do you want to only fetch the top 10 records and show them to the Grid?
  • Share more details about your requirement.



Regards,

Rahul



YH Yi Han April 7, 2022 09:34 AM UTC

Hi,


Thank you for your reply.

I attached a sample project for your analysis.


  • How did you perform the sorting operation? By clicking the header of the column in the Grid? Or Did you perform the sorting operation differently?

By clicking the header of the column.

  • How did you bind the data to the Grid?
please refer to the sample project.

  • Share full Grid code snippets.
please refer to the sample project.

  • After performing the sorting operation(by clicking the column header in the Grid), do you want to get the sorting column name while using CustomAdptor?


  • After performing the sorting operation(by clicking the column header in the Grid), do you want to only fetch the top 10 records and show them to the Grid?

Yes exactly.

I expect that the grid displays always the first 10 records.
First 10 records according to on which column we do the sort.
In the sample project, if we click on header "OrderDate" ascending, then the first 10 records sorted by OrderDate;  if we click on header "Freight" ascending, then the first 10 records sorted by Freight.

  • Share more details about your requirement.



Please suggest, many thanks

Yi


Attachment: blazor_grid_sorting_TOP_ROWS_ONLY_4acdb867.zip

RN Rahul Narayanasamy Syncfusion Team April 8, 2022 01:00 PM UTC

Hi Yi Han,


Thanks for the update.


Based on your case, we suggest you to use the paging(AllowPaging) feature to achieve your requirement. Set AllowPaging as true and set PageSize property as 10 in GridPageSettings. Find the below code snippets and sample for your reference.


 

<SfGrid  DataSource="@Orders" AllowPaging="true" AllowSorting="true" Height="270">

    <GridPageSettings PageSize="10"></GridPageSettings>

    <GridColumns>

        . . .

   </GridColumns>

</SfGrid>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSample-1493452507


Reference:

https://blazor.syncfusion.com/documentation/datagrid/getting-started#enable-paging

https://blazor.syncfusion.com/documentation/datagrid/paging



Please let us know if you have any concerns.


Regards,

Rahul


YH Yi Han April 11, 2022 12:14 PM UTC

Hi  Rahul,

Thank you for your reply.


That's the work around that I found on my side.

My expectation, really, is don't show all the pages:



Possible to achieve?

Thanks

Yi


RN Rahul Narayanasamy Syncfusion Team April 12, 2022 02:44 PM UTC

Hi Yi Han,


Thanks for the update.


We suspect that you want to render only 10 records in the Grid without using the Paging feature. We suggest you to achieve your requirement by using the Query property of the Grid. Find the below code snippets and sample for your reference.


 

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Data

 

 

<SfGrid  DataSource="@Orders" AllowSorting="true" Height="270" Query=@GridQuery>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  AutoFit="true"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"  AutoFit="true"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  AutoFit="true"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  AutoFit="true"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

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

 

    public Query GridQuery { get; set; } = new Query().Take(10);

 

    . ..

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleGrid368294559


https://blazor.syncfusion.com/documentation/datagrid/data-binding#sending-additional-parameters-to-the-server


Please let us know if you have any concerns.


Regards,

Rahul


Loader.
Up arrow icon