Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Compare Columns Effortlessly Using Column Pinning Feature in Syncfusion Data Grid

The column-pinning feature is used to stick any column to the left side as fixed or frozen while scrolling horizontally. This feature is mostly used when the grid has more columns than fit in the viewing area and users want specific columns always visible while scrolling.

Syncfusion Data Grid offers an API in the column model. It can be used to pin a specific column at the initial state or dynamically. Users can not only use the column menu or context menu to pin a column, but also drag a column or pin it dynamically.

The Syncfusion Data Grid follows the Microsoft Excel prototype and offers left-side column pinning only.

Usability overview

The Data Grid column-pinning feature has the following functionalities:

This set of features will be achieved by users with simple configuration (through an API). This kind of flexibility in feature usage is powered by the Syncfusion Data Grid. Now, let’s see each feature usage in more detail.

Users can pin a column through UI interaction using the column menu or context menu, or other grid actions like right-clicking. The following image illustrates how a column is pinned through UI interaction.

Pinning a column through the column menu or context menu.

Sample: https://stackblitz.com/edit/9tpg7w-5xjonh?file=index.ts

Pinning a column by dragging

You can also drag any column to pin it. Data Grid does not restrict the number of columns being pinned. The following image illustrates the pinning functionally when you simply drag the column header to the first position.

Pinning a column by dragging.

Sample: https://stackblitz.com/edit/9tpg7w-lrnuno?file=index.ts

Pinning an initial column dynamically

With most data grid components, users can only pin a column during initial rendering, but Syncfusion Data Grid lets users pin a column dynamically. The following demo illustrates how to pin a column by clicking the toggle icon in the column header. It has been achieved with minimal configuration in the Data Grid.

Pinning an initial column dynamically.

Sample: https://stackblitz.com/edit/9tpg7w-cud2zl?file=index.ts

Pinning subsequent columns dynamically

Pinning a column is compatible with major grid features such as subsequent columns and aggregation. The following image illustrates this functionality.

Pinning subsequent columns dynamically.Conclusion

In this blog post, we have seen how to pin columns while scrolling horizontally in the Data Grid control. The Syncfusion Data Grid offers column menu, context menu, and dragging support to pin any column. You can check out the project samples provided under each topic. Feel free to try out this sample and share your feedback in the comments section.

You can find the Essential JS 2 install download link on our website.  Please take a look at our live demos in our sample browser, and for more details refer to our documentation.

You can also contact us through our support forum, Direct-Trac, or feedback portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top