Version 1
Version 1

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


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.


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.