Migration from Spread.Views
GrapeCity DataViewsJS is an advanced version of GrapeCity Spread.Views. Although DataViewsJS inherit the code and API of Spread.Views, some changes are required in the Spread.Views to migrate it to DataViewsJS. This topic will help you update your application to DataViewsJS.
File Mapping
The below Table provides mapping between the JS files of old Spread.Views and corresponding new DataViewsJS. In a nutshell, Spread.Views uses gc.spread.views. prefix for all JS files whereas DataViewsJS uses the prefix gc.dataviews.
| Spread.Views file | DataViewsJS file | Notes |
|---|---|---|
| missing | gc.dataviews.common.min.js | It includes code shared between DataViews modules |
| gc.spread.views.dataview.[VERSION].min.js | gc.dataviews.core.min.js | It includes core DataView control |
| gc.spread.views.gridlayout.[VERSION].min.js | gc.dataviews.grid.min.js | It includes grid layout strategies. In DataViewsJS it includes HorizontalLayout strategy since it is based on shared code of grid layout |
| gc.spread.views.horizontallayout.[VERSION].min.js | missing | It is merged into gridlayout module. In Spread.Views it includes HorizontalLayout strategy. |
| gc.spread.views.cardlayout.[VERSION].min.js | gc.dataviews.cardlayout.min.js | It includes CardLayout strategy. |
| gc.spread.views.masonrylayout.[VERSION].min.js | gc.dataviews.masonry.min.js | It includes MasonryLayout strategy. |
| gc.spread.views.timelinegrouping.[VERSION].min.js | gc.dataviews.timeline.min.js | It includes TimelineGrouping strategy. |
| gc.spread.views.calendargrouping.[VERSION].min.js | gc.dataviews.calendar.min.js | It includes CalendarGrouping strategy. |
| gc.spread.views.trellisgrouping.[VERSION].min.js | gc.dataviews.trellis.min.js | It includes TrellisGrouping strategy. |
| gc.spread.views.gantt.[VERSION].min.js | gc.dataviews.gantt.min.js | Adds the Gantt feature |
| gc.spread.views.searchbox.[VERSION].min.js | gc.dataviews.searchbox.min.js | Adds searchbox feature. |
| gc.spread.views.sparkline.[VERSION].min.js | missing | It is merged into core module. Adds sparkline functions. |
| gc.spread.views.paging.[VERSION].min.js | missing | It is merged into core module. Adds pagination feature. |
NOTE: You need to include gc.dataviews.common.min.js before all other DataViewsJS files.
Class Mapping
The below table provides mapping between the global classes of old Spread.Views and corresponding new DataViewsJS.
| Spread.Views class | DataViewsJS class | Notes |
|---|---|---|
| GC.Spread.Views.DataView | GC.DataViews.DataView | Root DataView control |
| GC.Spread.Views.Plugins.GridLayout | GC.DataViews.GridLayout | Grid layout strategy |
| GC.Spread.Views.Plugins.HorizontalLayout | GC.DataViews.HorizontalLayout | Horizontal grid layout strategy |
| GC.Spread.Views.Plugings.CardLayout | GC.DataViews.CardLayout | Card layout strategy |
| GC.Spread.Views.Plugins.MasonryLayout | GC.DataViews.MasonryLayout | Masonry layout strategy |
| GC.Spread.Views.Plugins.TimelineGrouping | GC.DataViews.TimelineGrouping | Timeline grouping strategy |
| GC.Spread.Views.Plugins.CalendarGrouping | GC.DataViews.CalendarGrouping | Calendar grouping strategy |
| GC.Spread.Views.Plugins.TrellisGrouping | GC.DataViews.TrellisGrouping | Trellis grouping strategy |
| GC.Spread.Views.SearchBox | GC.DataViews.SearchBox | SearchBox multi-filter input |
| GC.Spread.Views.Sparkline.LineSparkline | GC.DataViews.LineSparkline | Line sparkline |
| GC.Spread.Views.Sparkline.ColumnSparkline | GC.DataViews.ColumnSparkline | Column bar sparkline |
| GC.Spread.Views.Sparkline.PieSparkline | GC.DataViews.PieSparkline | Pie sparkline |
| GC.Spread.Views.Sparkline.WinlossSparkline | GC.DataViews.WinlossSparkline | Winloss sparkline |
| GC.Spread.Views.DataView.DataManager | GC.DataViews.DataManager | DataManager |
Events
In Spread.Views, all events accept two arguments. First argument is the sender object which raises the event and second argument is the object with event args. Whereas in DataViewsJS, all events accept only one event argument without the sender argument. Also, since the code of DataViewsJS is ported to TypeScript, all the event args are typed and have own type definitions. The documentation for event args types can be referred in online API reference.
Styles
In DataViewsJS we have also revised styles including a new default theme. If you have done CSS customizations at your end, they might require changes.
Feedback
Submit and view feedback for