Hi Younus
Rahman,
Greetings
from Syncfusion Support.
Based on the
information you have provided, we understand that your requirement is to group
a column based on a range of values and then sort the grouped column according
to the number of records in each group. By default, the Grid component does not
support both of these functionalities directly. However, you can implement this
functionality by following the approach described below:
To group the
column based on a range, you can add a new column named "SizeRange"
to the data source. This column should contain computed range values. Instead
of grouping by the "Size" column, you can group the Grid using the
"SizeRange" column to achieve the desired grouping by range.
Once the data
is grouped, you can sort each group in ascending or descending order using any
other column, including the original "Size" column for grouped record
sorting.
To sort the
groups itself based on the number of records in each group, you can add another
computed column named "GroupCount" to the data source. Then, you can
customize the sorting of the "SizeRange" column using the
"sortComparer" feature, which will sort the groups based on the count
of records.
We have
prepared a utility function that calculates and adds both the
"SizeRange" and "GroupCount" computed columns to the
dataSource. We have also created a "sortComparer" function for the
"SizeRange" column to sort the groups by record count. Please refer
to the code snippet below:
|
[index.js]
// Utility function to enrich grid data with SizeRange and GroupCount
const enrichGridDataWithSizeGrouping = (rawData) => {
// Step 1: Compute the size range bucket for each file
const getSizeRange = (size) => {
const lower = Math.floor(size / 100) * 100;
return `${lower}KB - ${lower + 99}KB`;
};
// Step 2: Add SizeRange to each item based on its FileSizeKB
const dataWithRanges = rawData.map((item) => ({
...item,
SizeRange: getSizeRange(item.FileSizeKB),
}));
// Step 3: Count how many items fall into each SizeRange group
const groupCounts = {};
dataWithRanges.forEach((item) => {
groupCounts[item.SizeRange] = (groupCounts[item.SizeRange] || 0) + 1;
});
// Step 4: Add GroupCount to each item based on its SizeRange
const enrichedData = dataWithRanges.map((item) => ({
...item,
GroupCount: groupCounts[item.SizeRange],
}));
// Step 5: Return the enriched dataset
return enrichedData;
};
const App = () => {
// Use enrichment function
const enrichedData = enrichGridDataWithSizeGrouping(rawData);
// Custom sortComparer using group count
const sizeRangeSortComparer = (_a, _b, aRow, bRow) => {
return aRow.GroupCount - bRow.GroupCount;
};
return (
<GridComponent
dataSource={enrichedData}
allowGrouping={true}
allowSorting={true}
groupSettings={{ columns: ['SizeRange'] }}
height={500}
>
. . . . .
<ColumnDirective
field="SizeRange"
headerText="Size Range"
width="120"
sortComparer={sizeRangeSortComparer}
/>
. . . . .
|
Sample: https://stackblitz.com/edit/react-grid-qn3hcx-ot6fpdit
Please note
that these customizations are applicable only when using a local data source.
If you are using a remote data source, you must compute and add the necessary
columns on the server side. Additionally, the "sortComparer" feature
works only with local data, because sorting in remote data scenarios is handled
entirely on the server. In such cases, you must implement custom sorting logic
for the "SizeRange" column on the server side.
For more
information about the "sortComparer" feature, please refer to the
documentation below:
Documentation:
Custom
Sorting in React Grid component | Syncfusion
We noticed
that you have described issue with the sorting functionality itself. However,
without specific details, we are unable to reproduce or validate the issue.
Kindly share more information or a video demonstration along with a modified
sample so that we can investigate further.
Also, please
note that when paging is enabled, the Grid renders a number of records based on
the "pageSettings.pageSize"
property (default is 12 records). If the total height of the caption rows and
data rows is less than the Grid’s height, empty space will be displayed when
closing all the grouped rows. This is the default behavior. If you prefer not
to see this empty space, you can set the Grid’s "height" property to
"auto", which is the default value. This will allow the Grid to
adjust its height based on the content.
We hope this
solution and explanation address your concerns. Please let us know if you need
any further assistance.
Regards,
Santhosh I
