Migration from Essential^® JS 1

8 Dec 20242 minutes to read

This article describes the API migration process of Range navigator component from Essential^® JS 1 to Essential^® JS 2.

RangeNavigator

</table> ## Series

Behaviour	API in Essential® JS 1	API in Essential® JS 2
Allow snapping	Property:AllowSnapping </br> </br> @(Html.EJ().RangeNavigator("container") .AllowSnapping(true) )	Property:AllowSnapping </br> </br> @(Html.EJS().RangeNavigator("container") .AllowSnapping(true) )
Animation duration	Not Applicable	Property:AnimationDuration </br> </br> @(Html.EJS().RangeNavigator("container") .AnimationDuration("3000") )
Border for range navigator	Property:Border </br> </br> @(Html.EJS().RangeNavigator("container") .Border(b => b.Color("red").Width("2")) )	Property:NavigatorBorder </br> </br> @(Html.EJS().RangeNavigator("container") .NavigatorBorder(b => b.Color("red").Width("2")) )
dataSource for range navigator	Property:DataSource </br> </br> @(Html.EJ().RangeNavigator("container") .DataSource() )	Property:DataSource </br> </br> @(Html.EJS().RangeNavigator("container") .DataSource(ViewBag.dataSource) )
enabling deffered update for range navigator	Property:EnableDeferedUpdate </br> </br> @(Html.EJ().RangeNavigator("container") .EnableDeferedUpdate(true) )	Property:EnableDeferredUpdate </br> </br> @(Html.EJS().RangeNavigator("container") .EnableDeferedUpdate(true) )
multilevel level labels	Property:LabelSettings.HigherLevelLabels </br> </br> @(Html.EJ().RangeNavigator("container") .LabelSettings(l => l.HigherLevelLabels()) )	Property:EnableGrouping </br> </br> @(Html.EJS().RangeNavigator("container") .EnableGrouping(false) )
enabling scroll bar	Property:EnableScrollBar </br> </br> @(Html.EJ().RangeNavigator("container") .EnableScrollBar(true) )	Not Applicable
enabling auto resizing	Property:EnableAutoResize </br> </br> @(Html.EJ().RangeNavigator("container") .EnableAutoResize(true) )	Not Applicable
responsive of range navigator	Property:IsResponsive </br> </br> @(Html.EJ().RangeNavigator("container") .IsResponsive(true) )	Not Applicable
enabling RTL for range navigator	Property:EnableRtl </br> </br> @(Html.EJ().RangeNavigator("container") .EnableRtl(true) )	Property:EnableRtl </br> </br> @(Html.EJS().RangeNavigator("container") .EnableRtl(true) )
interval for range navigator	Property:ValueAxisSettings.Range.Interval </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.Range(r => r.Interval("1"))) )	Property:Interval </br> </br> @(Html.EJS().RangeNavigator("container") .Interval("1") ) </td> </tr>
intervaltype for range navigator	Property:ValueAxisSettings.Range.IntervalType </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.Range(r => r.IntervalType("Years"))) )	Property:IntervalType </br> </br> @(Html.EJS().RangeNavigator("container") .IntervalType(Syncfusion.EJ2.Charts.RangeIntervalType.Years) )
labelformat for range navigator	Not applicable	Property:LabelFormat </br> </br> @(Html.EJS().RangeNavigator("container") .LabelFormat(yMd") )
label intersect action for range navigator	Not applicable	Property:LabelIntersectAction </br> </br> @(Html.EJS().RangeNavigator("container") .LabelIntersectAction(Syncfusion.EJ2.Charts.RangeLabelIntersectAction.Hide) )
labelStyle range navigator	Property:ValueAxisSettings.Font </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.Font()) )	Property:LabelStyle </br> </br> @(Html.EJS().RangeNavigator("container") .LabelStyle() )
locale of range navigator	Property:Locale </br> </br> @(Html.EJ().RangeNavigator("container") .Locale("en-US") )	Property:Locale </br> </br> @(Html.EJS().RangeNavigator("container") .Locale("en-US") )
major grid lines of range navigator	Property:ValueAxisSettings.MajorGridLines </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.MajorGridLines(m => m.Width("2").Color("red"))) )	Property:MajorGridLines </br> </br> @(Html.EJS().RangeNavigator("container") .MajorGridLines(mg => mg.Color("blue").Width(2).DashArray("5,5")) )
margin of range navigator	Not Applicable	Property:Margin </br> </br> @(Html.EJS().RangeNavigator("container") .Margin() )
maximum value of range navigator	Property:ValueAxisSettings.Range.Max </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.Range(r => r.Max("34"))) )	Property:Maximum </br> </br> @(Html.EJS().RangeNavigator("container") .Maximum("34") )
minimum value of range navigator	Property:ValueAxisSettings.Range.Min </br> </br> @(Html.EJ().RangeNavigator("container") .ValueAxisSettings(v => v.Range(r => r.Min("10"))) )	Property:Minimum </br> </br> @(Html.EJS().RangeNavigator("container") .Minimum("10") )
query for data source of range navigator	Not Applicable	Property:Query </br> </br> @(Html.EJS().RangeNavigator("container") .Query() )
Secondary label alignment of range navigator	Not Applicable	Property:SecondaryLabelAlignment </br> </br> @(Html.EJS().RangeNavigator("container") .SecondaryLabelAlignmen("Far") )
Skeleton of range navigator axis	Not Applicable	Property:Skeleton </br> </br> @(Html.EJS().RangeNavigator("container") .Skeleton() )
skeletontype of range navigator axis	Not Applicable	Property:SkeletonType </br> </br> @(Html.EJS().RangeNavigator("container") .SkeletonType() )
Theme of range navigator	Property:Theme </br> </br> @(Html.EJS().RangeNavigator("container") .Theme() )	Property:Theme </br> </br> @(Html.EJS().RangeNavigator("container") .Theme() )
Default selector value range navigator	Property:SelectedRangeSettings </br> </br> @(Html.EJ().RangeNavigator("container") .SelectedRangeSettings(s => s.Start("2").End("20")) )	Property:Value </br> </br> @(Html.EJS().RangeNavigator("container") .Value("2,10") )
Value type of range navigator	Property:ValueType </br> </br> $@(Html.EJS().RangeNavigator("container") .ValueType("DateTime") )	Property:valueType </br> </br> @(Html.EJS().RangeNavigator("container") .ValueType(Syncfusion.EJ2.Charts.RangeValueType.DateTime)
Width of range navigator	Property:Size.Width </br> </br> @(Html.EJ().RangeNavigator("container") .Size(s => s.Width("400")) )	Property:Width </br> </br> @(Html.EJS().RangeNavigator("container") .Width("400") )
Height of range navigator	Property:Size.Height </br> </br> @(Html.EJ().RangeNavigator("container") .Size(s => s.Height("400")) )	Property:Height </br> </br> @(Html.EJS().RangeNavigator("container") .Height("400") )
Series settings for range navigator	Property:SeriesSettings </br> </br> @(Html.EJ().RangeNavigator("container") .SeriesSettings() )	Not Applicable
Range settings for range navigator	Property:RangeSettings </br> </br> @(Html.EJ().RangeNavigator("container") .RangeSettings(r => r.Start("20").End("30")) )	Not Applicable
Scroll range settings for range navigator	Property:ScrollRangeSettings </br> </br> @(Html.EJ().RangeNavigator("container") .ScrollRangeSettings(r => r.Start("20").End("30")) )	Not Applicable

Behaviour	API in Essential® JS 1	API in Essential® JS 2
animation	Property:EnableAnimation </br> </br> @(Html.EJ().RangeNavigator("container") .EnableAnimation(true)	Property:Animation </br> </br> @(Html.EJS().RangeNavigator("container") .Animation(a => a.Enable(true).Duration("3000")) )
Border for range navigator series	Not Applicable	Property:Border </br> </br> @(Html.EJS().RangeNavigator("container") .Border(b => b.Color("red").Width("2")) )
dataSource for range navigator	Property:Series.DataSource </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.DataSource()) )	Property:Series.DataSource </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.DataSource()) )
query for data source of range navigator	Not Applicable	Property:Query </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.Query()) )
series type for range navigator	Property:Series.Type </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.Type(SeriesType.Line)) )	Property:Series.Type </br> </br> @(Html.EJS().RangeNavigator("container") .Type(Syncfusion.EJ2.Charts.RangeNavigatorType.Line) )
series xName for range navigator	Property:Series.XName </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.XName()) )	Property:Series.XName </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.XName()) )
series yName for range navigator	Property:Series.YName </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.YName()) )	Property:Series.YName </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.YName()) )
series fill color for range navigator	Property:Series.Fill </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.Fill("red")) )	Property:Series.Fill </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.Fill("red")) )
series width for range navigator	Property:Series.Width </br> </br> @(Html.EJ().RangeNavigator("container") .Series(s => s.Width("")) )	Property:Series.Width </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.Width("")) )
series dashArray for range navigator	Not Applicable	Property:Series.DashArray </br> </br> @(Html.EJS().RangeNavigator("container") .Series(s => s.DashArray("10,5")) )

## StyleSettings

Behaviour	API in Essential® JS 1	API in Essential® JS 2
Style settings of range navigator	Property:NavigatorStyleSettings </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings() )	Property:StyleSettings </br> </br> @(Html.EJS().RangeNavigator("container") .StyleSettings() )
Selected region color of range navigator	Property:SelectedRegionColor </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.SelectedRegionColor("red")) )	Property:SelectedRegionColor </br> </br> @(Html.EJS().RangeNavigator("container") .StyleSettings(s => s.SelectedRegionColor("red")) ) </code>
UnSeleted region color of range navigator	Property:UnselectedRegionColor </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.UnSelectedRegionColor("red")) )	Property:UnselectedRegionColor </br> </br> @(Html.EJS().RangeNavigator("container") .StyleSettings(s => s.UnSelectedRegionColor("red")) )
Thumb color of range navigator	Property:ThumColor </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.ThumColor("red")) )	Property:ThumbSettings </br> </br> @(Html.EJS().RangeNavigator("container") .StyleSettings(s => s.ThumbSettings("red")) ) </code>
Selected region opacity of range navigator	Property:SelectedRegionOpacity </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.SelectedRegionOpacity("0.4")) )	Not Applicable
Unselected region opacity of range navigator	Property:UnselectedRegionOpacity </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.UnSelectedRegionOpacity("0.4")) )	Not Applicable
Background for thumb	Property:Background </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.Background("red")) )	Not Applicable
border for thumb	Property:Border </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.Border(b => b.Color("red").Width("2"))) )	Not Applicable
Highlightsettings for range navigator	Property:HighlightSettings </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.HighlightSettings()) )	Not Applicable
Selected style settings for range navigator	Property:SelectionSettings </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.SelectionSettings()) )	Not Applicable
Left thumb template for range navigator	Property:LeftThumbTemplate </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.LeftThumbTemplate()) )	Not Applicable
Right thumb template for range navigator	Property:RightThumbTemplate </br> </br> @(Html.EJ().RangeNavigator("container") .NavigatorStyleSettings(n => n.RightThumbTemplate()) )	Not Applicable

## Tooltip

Behaviour	API in Essential® JS 1	API in Essential® JS 2
tooltip	Property:Visible </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Visible(true)) )	Property:Enable </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Enable(true)) )
background color of tooltip	Property:BackgroundColor </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.BackgroundColor("red")) )	Property:Fill </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Fill("red")) )
Font style of tooltip	Property:Font </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Font()) )	Property:TextStyle </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.TextStyle()) )
Label format of tooltip	Property:LabelFormat </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.LabelFormat("yMd")) )	Property:Format </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Format("yMd")) )
Display mode of tooltip	Property:TooltipDisplayMode </br> </br> @(Html.EJ().RangeNavigator("container") .Tooltip(t => t.TooltipDisplayMode("always")) )	Property:displayMode </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.DisplayMode("always")) )
Template of tooltip	Not Applicable	Property:Template </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Template("")) )
Border of tooltip	Not Applicable	Property:Border </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Border(b => b.Color("red").Width("2"))) )
Opacity of tooltip	Not Applicable	Property:Opacity </br> </br> @(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Opacity("0.5"))) )

## Period Selector

Behaviour	API in Essential® JS 1	API in Essential® JS 2
period selector	Not Applicable	Property:PeriodSelector </br> </br> (Html.EJS().RangeNavigator("container") .PeriodSelector(p => p.Periods(pr => pr.Interval("1").IntervalType("Months").Text("1M"))))

## Methods

Behaviour	API in Essential® JS 1	API in Essential® JS 2
Print	Not Applicable	Property:Print() </br> </br> @(Html.EJS().RangeNavigator("container") RangeNavigator.Print())
Export	Not Applicable	Property:export() </br> </br> @(Html.EJS().RangeNavigator("container") RangeNavigator.Export())

## Events

Behaviour	API in Essential® JS 1	API in Essential® JS 2
Fires before loading the RangeNavigator.	Property:Load </br> </br> @(Html.EJ().RangeNavigator("container") .Load() )	Property:Load </br> </br> @(Html.EJS().RangeNavigator("container") .Load() )
Fires before loading the RangeNavigator.	Property:Loaded </br> </br> @(Html.EJ().RangeNavigator("container") .Loaded() )	Property:Loaded </br> </br> @(Html.EJS().RangeNavigator("container") .Loaded() )
Fires when the value changes in range navigator.	Property:RangeChanged </br> </br> @(Html.EJ().RangeNavigator("container") .RangeChanged() )	Property:Changed </br> </br> @(Html.EJS().RangeNavigator("container") .Changed() )
Fires before after resize the RangeNavigator.	Not Applicable	Property:Resized </br> </br> @(Html.EJS().RangeNavigator("container") .Resized() )
Fires before tooltip the RangeNavigator.	Not Applicable	Property:TooltipRender </br> </br> @(Html.EJS().RangeNavigator("container") .TooltipRender() )
Fires before period render in the RangeNavigator.	Not Applicable	Property:SelectorRender </br> </br> @(Html.EJS().RangeNavigator("container") .SelectorRender() )
Fires when scrollStart the RangeNavigator.	Property:ScrollStart </br> </br> @(Html.EJ().RangeNavigator("container") .ScrollStart() )	Not Applicable
Fires when scrollEnd the RangeNavigator.	Property:ScrollEnd </br> </br> @(Html.EJ().RangeNavigator("container") .ScrollEnd() )	Not Applicable
Fires when selected range Start the RangeNavigator.	Property:SelectedRangeStart </br> </br> @(Html.EJ().RangeNavigator("container") .SelectedRangeStart() )	Not Applicable
Fires when selected range ends the RangeNavigator.	Property:SelectedRangeEnd </br> </br> @(Html.EJ().RangeNavigator("container") .SelectedRangeEnd() )	Not Applicable
Fires when scroll range changed in the RangeNavigator.	Property:ScrollChanged </br> </br> @(Html.EJ().RangeNavigator("container") .ScrollChanged() )	Not Applicable
Fires when click in the RangeNavigator.	Property:Click </br> </br> @(Html.EJ().RangeNavigator("container") .Click() )	Not Applicable
Fires when right click in the RangeNavigator.	Property:RightClick </br> </br> @(Html.EJ().RangeNavigator("container") .RightClick() )	Not Applicable
Fires when double click in the RangeNavigator.	Property:DoubleClick </br> </br> @(Html.EJ().RangeNavigator("container") .DoubleClick() )	Not Applicable