Migration from Essential JS 1

17 Feb 20222 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