Mohammed Farook J
TL;DR: Learn to implement row pinning in React and Angular Data Grid to keep priority records fixed at the top while scrolling. Combine it with conditional row selection (e.g., skip archived/cancelled rows) to reduce user error and protect data integrity. Use a predicate (e.g., isRowSelectable) and a pinning callback/prop to programmatically control which rows stay visible and which can be selected. This approach works well with paging, filtering, and checkbox mode.
We’re excited to share the latest enhancements to the Syncfusion Data Grid component in the Essential Studio® 2025 Volume 4 release. Designed to empower developers building data-intensive applications, these new features, Conditional Row Selection and Row Pinning, are now available for both React and Angular frameworks.
Whether you’re managing large datasets or improving user interactions, these updates integrate seamlessly with existing grid functionalities like paging, sorting, filtering, and CRUD operations.
Let’s dive into the details.
Conditional Row Selection: Control which rows users can select
Conditional row selection allows you to define which rows in the Data Grid can be selected based on their data. This is ideal for scenarios where certain records, such as archived or canceled items, should be protected from selection. It ensures users focus only on relevant data, improving both usability and data integrity.
You can achieve this using the isRowSelectable property, which evaluates each row’s data and returns a Boolean value (true for selectable rows or false otherwise). For local data, this callback runs during initialization; for remote data, it evaluates rows on the current page and re-runs during actions like paging or filtering.
In checkbox selection mode, non-selectable rows remain unchecked, providing a smooth experience. For example, you can restrict the selection to rows where the status is set to Cancelled.
Here’s how you can do it in React.
const isRowSelectable = (data) => data.Status !== 'Cancelled';
<GridComponent
dataSource={ordersData}
allowSelection={true}
selectionSettings={{ type: 'Multiple', checkboxOnly: true }}
isRowSelectable={isRowSelectable}
// Additional configurations...
/> Here’s how you can do it in Angular.
public isRowSelectable(data: any): boolean {
return data.Status !== 'Cancelled';
}
<ejs-grid [dataSource]='data' [allowSelection]='true' [isRowSelectable]='isRowSelectable'>
<!-- Columns and other settings -->
</ejs-grid>
Here’s a quick demo of the feature in action:
This feature enhances data integrity and user experience by limiting interactions to only valid rows.
Note: You can check out the conditional row selection demos in React and Angular Data Grids to see how to restrict selection based on custom logic.
Row pinning: Keep critical data always visible
Row Pinning allows you to fix specific rows at the top of the grid, keeping them visible during scrolling, paging, or other interactions. This is ideal for highlighting high-priority tasks or summaries, without disrupting the grid’s layout.
To implement this, use the isRowPinned property, which checks the row data and returns true for rows that should be pinned. A primary key column (isPrimaryKey={true}) is required to maintain data consistency.
Pinned rows appear above the scrollable content, don’t count toward page size, and fully support selection, filtering, sorting, and CRUD operations. You can also enable context menu options, like PinRow and UnpinRow, for dynamic user control.
Here’s the React code example:
const isRowPinned = (data) => data.Status === 'Open' && data.Priority === 'Critical';
<GridComponent
dataSource={data}
height='315'
allowPaging={true}
pageSettings={{ pageSize: 15 }}
isRowPinned={isRowPinned}
columns={[
{ field: 'TaskID', isPrimaryKey: true },
// Other columns...
]}
// Inject services like Page, ContextMenu
/>Here’s the Angular code example:
public isRowPinned(data: any): boolean {
return data.Status === 'Open' && data.Priority === 'Critical';
}
<ejs-grid [dataSource]='data' [allowPaging]='true' [isRowPinned]='isRowPinned'>
<e-columns>
<e-column field='TaskID' [isPrimaryKey]='true'></e-column>
<!-- Other columns -->
</e-columns>
</ejs-grid> Here’s a preview of the feature in action:
This keeps essential information front and center, boosting productivity in data-heavy applications.
Note: For more insights, explore the Pinned rows demos in React and Angular Data Grid.
Conclusion
Thank you for reading! The Syncfusion Data Grid in Essential Studio 2025 Volume 4, released in December 2025, introduces two powerful features: Conditional Row Selection and Row Pinning. These enhancements give greater control over user interactions and improve the usability of data-intensive applications.
Ready to implement these features? Update your packages to the latest version and start implementing them in your projects. If you have feedback or need support, visit our forums or contact our team.
Check out our Release Notes and What’s New pages to see the other updates in this release and leave your feedback in the comments section below. We would love to hear from you.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.
You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!
No spam, just valuable updates.