This article describes the API migration process of Range navigator component from Essential JS 1 to Essential JS 2.
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Allow snapping |
Property:AllowSnapping
@(Html.EJ().RangeNavigator("container")
.AllowSnapping(true)
)
|
Property:AllowSnapping
@(Html.EJS().RangeNavigator("container")
.AllowSnapping(true)
)
|
| Animation duration |
Not Applicable
|
Property:AnimationDuration
@(Html.EJS().RangeNavigator("container")
.AnimationDuration("3000")
)
|
| Border for range navigator |
Property:Border
@(Html.EJS().RangeNavigator("container")
.Border(b => b.Color("red").Width("2"))
)
|
Property:NavigatorBorder
@(Html.EJS().RangeNavigator("container")
.NavigatorBorder(b => b.Color("red").Width("2"))
)
|
| dataSource for range navigator |
Property:DataSource
@(Html.EJ().RangeNavigator("container")
.DataSource()
)
|
Property:DataSource
@(Html.EJS().RangeNavigator("container")
.DataSource(ViewBag.dataSource)
)
|
| enabling deffered update for range navigator |
Property:EnableDeferedUpdate
@(Html.EJ().RangeNavigator("container")
.EnableDeferedUpdate(true)
)
|
Property:EnableDeferredUpdate
@(Html.EJS().RangeNavigator("container")
.EnableDeferedUpdate(true)
)
|
| multilevel level labels |
Property:LabelSettings.HigherLevelLabels
@(Html.EJ().RangeNavigator("container")
.LabelSettings(l => l.HigherLevelLabels())
)
|
Property:EnableGrouping
@(Html.EJS().RangeNavigator("container")
.EnableGrouping(false)
)
|
| enabling scroll bar |
Property:EnableScrollBar
@(Html.EJ().RangeNavigator("container")
.EnableScrollBar(true)
)
|
Not Applicable
|
| enabling auto resizing |
Property:EnableAutoResize
@(Html.EJ().RangeNavigator("container")
.EnableAutoResize(true)
)
|
Not Applicable
|
| responsive of range navigator |
Property:IsResponsive
@(Html.EJ().RangeNavigator("container")
.IsResponsive(true)
)
|
Not Applicable
|
| enabling RTL for range navigator |
Property:EnableRtl
@(Html.EJ().RangeNavigator("container")
.EnableRtl(true)
)
|
Property:EnableRtl
@(Html.EJS().RangeNavigator("container")
.EnableRtl(true)
)
|
| interval for range navigator |
Property:ValueAxisSettings.Range.Interval
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.Range(r => r.Interval("1")))
)
|
Property:Interval
@(Html.EJS().RangeNavigator("container")
.Interval("1")
)
|
| intervaltype for range navigator |
Property:ValueAxisSettings.Range.IntervalType
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.Range(r => r.IntervalType("Years")))
)
|
Property:IntervalType
@(Html.EJS().RangeNavigator("container")
.IntervalType(Syncfusion.EJ2.Charts.RangeIntervalType.Years)
)
|
| labelformat for range navigator |
Not applicable
|
Property:LabelFormat
@(Html.EJS().RangeNavigator("container")
.LabelFormat(yMd")
)
|
| label intersect action for range navigator |
Not applicable
|
Property:LabelIntersectAction
@(Html.EJS().RangeNavigator("container")
.LabelIntersectAction(Syncfusion.EJ2.Charts.RangeLabelIntersectAction.Hide)
)
|
| labelStyle range navigator |
Property:ValueAxisSettings.Font
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.Font())
)
|
Property:LabelStyle
@(Html.EJS().RangeNavigator("container")
.LabelStyle()
)
|
| locale of range navigator |
Property:Locale
@(Html.EJ().RangeNavigator("container")
.Locale("en-US")
)
|
Property:Locale
@(Html.EJS().RangeNavigator("container")
.Locale("en-US")
)
|
| major grid lines of range navigator |
Property:ValueAxisSettings.MajorGridLines
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.MajorGridLines(m => m.Width("2").Color("red")))
)
|
Property:MajorGridLines
@(Html.EJS().RangeNavigator("container")
.MajorGridLines(mg => mg.Color("blue").Width(2).DashArray("5,5"))
)
|
| margin of range navigator |
Not Applicable
|
Property:Margin
@(Html.EJS().RangeNavigator("container")
.Margin()
)
|
| maximum value of range navigator |
Property:ValueAxisSettings.Range.Max
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.Range(r => r.Max("34")))
)
|
Property:Maximum
@(Html.EJS().RangeNavigator("container")
.Maximum("34")
)
|
| minimum value of range navigator |
Property:ValueAxisSettings.Range.Min
@(Html.EJ().RangeNavigator("container")
.ValueAxisSettings(v => v.Range(r => r.Min("10")))
)
|
Property:Minimum
@(Html.EJS().RangeNavigator("container")
.Minimum("10")
)
|
| query for data source of range navigator |
Not Applicable
|
Property:Query
@(Html.EJS().RangeNavigator("container")
.Query()
)
|
| Secondary label alignment of range navigator |
Not Applicable
|
Property:SecondaryLabelAlignment
@(Html.EJS().RangeNavigator("container")
.SecondaryLabelAlignmen("Far")
)
|
| Skeleton of range navigator axis |
Not Applicable
|
Property:Skeleton
@(Html.EJS().RangeNavigator("container")
.Skeleton()
)
|
| skeletontype of range navigator axis |
Not Applicable
|
Property:SkeletonType
@(Html.EJS().RangeNavigator("container")
.SkeletonType()
)
|
| Theme of range navigator |
Property:Theme
@(Html.EJS().RangeNavigator("container")
.Theme()
)
|
Property:Theme
@(Html.EJS().RangeNavigator("container")
.Theme()
)
|
| Default selector value range navigator |
Property:SelectedRangeSettings
@(Html.EJ().RangeNavigator("container")
.SelectedRangeSettings(s => s.Start("2").End("20"))
)
|
Property:Value
@(Html.EJS().RangeNavigator("container")
.Value("2,10")
)
|
| Value type of range navigator |
Property:ValueType
$@(Html.EJS().RangeNavigator("container")
.ValueType("DateTime")
)
|
Property:valueType
@(Html.EJS().RangeNavigator("container")
.ValueType(Syncfusion.EJ2.Charts.RangeValueType.DateTime)
|
| Width of range navigator |
Property:Size.Width
@(Html.EJ().RangeNavigator("container")
.Size(s => s.Width("400"))
)
|
Property:Width
@(Html.EJS().RangeNavigator("container")
.Width("400")
)
|
| Height of range navigator |
Property:Size.Height
@(Html.EJ().RangeNavigator("container")
.Size(s => s.Height("400"))
)
|
Property:Height
@(Html.EJS().RangeNavigator("container")
.Height("400")
)
|
| Series settings for range navigator |
Property:SeriesSettings
@(Html.EJ().RangeNavigator("container")
.SeriesSettings()
)
|
Not Applicable
|
| Range settings for range navigator |
Property:RangeSettings
@(Html.EJ().RangeNavigator("container")
.RangeSettings(r => r.Start("20").End("30"))
)
|
Not Applicable
|
| Scroll range settings for range navigator |
Property:ScrollRangeSettings
@(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
@(Html.EJ().RangeNavigator("container")
.EnableAnimation(true)
|
Property:Animation
@(Html.EJS().RangeNavigator("container")
.Animation(a => a.Enable(true).Duration("3000"))
)
|
| Border for range navigator series |
Not Applicable
|
Property:Border
@(Html.EJS().RangeNavigator("container")
.Border(b => b.Color("red").Width("2"))
)
|
| dataSource for range navigator |
Property:Series.DataSource
@(Html.EJ().RangeNavigator("container")
.Series(s => s.DataSource())
)
|
Property:Series.DataSource
@(Html.EJS().RangeNavigator("container")
.Series(s => s.DataSource())
)
|
| query for data source of range navigator |
Not Applicable
|
Property:Query
@(Html.EJS().RangeNavigator("container")
.Series(s => s.Query())
)
|
| series type for range navigator |
Property:Series.Type
@(Html.EJ().RangeNavigator("container")
.Series(s => s.Type(SeriesType.Line))
)
|
Property:Series.Type
@(Html.EJS().RangeNavigator("container")
.Type(Syncfusion.EJ2.Charts.RangeNavigatorType.Line)
)
|
| series xName for range navigator |
Property:Series.XName
@(Html.EJ().RangeNavigator("container")
.Series(s => s.XName())
)
|
Property:Series.XName
@(Html.EJS().RangeNavigator("container")
.Series(s => s.XName())
)
|
| series yName for range navigator |
Property:Series.YName
@(Html.EJ().RangeNavigator("container")
.Series(s => s.YName())
)
|
Property:Series.YName
@(Html.EJS().RangeNavigator("container")
.Series(s => s.YName())
)
|
| series fill color for range navigator |
Property:Series.Fill
@(Html.EJ().RangeNavigator("container")
.Series(s => s.Fill("red"))
)
|
Property:Series.Fill
@(Html.EJS().RangeNavigator("container")
.Series(s => s.Fill("red"))
)
|
| series width for range navigator |
Property:Series.Width
@(Html.EJ().RangeNavigator("container")
.Series(s => s.Width(""))
)
|
Property:Series.Width
@(Html.EJS().RangeNavigator("container")
.Series(s => s.Width(""))
)
|
| series dashArray for range navigator |
Not Applicable
|
Property:Series.DashArray
@(Html.EJS().RangeNavigator("container")
.Series(s => s.DashArray("10,5"))
)
|
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Style settings of range navigator |
Property:NavigatorStyleSettings
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings()
)
|
Property:StyleSettings
@(Html.EJS().RangeNavigator("container")
.StyleSettings()
)
|
| Selected region color of range navigator |
Property:SelectedRegionColor
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.SelectedRegionColor("red"))
)
|
Property:SelectedRegionColor
@(Html.EJS().RangeNavigator("container")
.StyleSettings(s => s.SelectedRegionColor("red"))
)
|
| UnSeleted region color of range navigator |
Property:UnselectedRegionColor
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.UnSelectedRegionColor("red"))
)
|
Property:UnselectedRegionColor
@(Html.EJS().RangeNavigator("container")
.StyleSettings(s => s.UnSelectedRegionColor("red"))
)
|
| Thumb color of range navigator |
Property:ThumColor
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.ThumColor("red"))
)
|
Property:ThumbSettings
@(Html.EJS().RangeNavigator("container")
.StyleSettings(s => s.ThumbSettings("red"))
)
|
| Selected region opacity of range navigator |
Property:SelectedRegionOpacity
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.SelectedRegionOpacity("0.4"))
)
|
Not Applicable
|
| Unselected region opacity of range navigator |
Property:UnselectedRegionOpacity
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.UnSelectedRegionOpacity("0.4"))
)
|
Not Applicable
|
| Background for thumb |
Property:Background
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.Background("red"))
)
|
Not Applicable
|
| border for thumb |
Property:Border
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.Border(b => b.Color("red").Width("2")))
)
|
Not Applicable
|
| Highlightsettings for range navigator |
Property:HighlightSettings
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.HighlightSettings())
)
|
Not Applicable
|
| Selected style settings for range navigator |
Property:SelectionSettings
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.SelectionSettings())
)
|
Not Applicable
|
| Left thumb template for range navigator |
Property:LeftThumbTemplate
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.LeftThumbTemplate())
)
|
Not Applicable
|
| Right thumb template for range navigator |
Property:RightThumbTemplate
@(Html.EJ().RangeNavigator("container")
.NavigatorStyleSettings(n => n.RightThumbTemplate())
)
|
Not Applicable
|
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Fires before loading the RangeNavigator. |
Property:Load
@(Html.EJ().RangeNavigator("container")
.Load()
)
|
Property:Load
@(Html.EJS().RangeNavigator("container")
.Load()
)
|
| Fires before loading the RangeNavigator. |
Property:Loaded
@(Html.EJ().RangeNavigator("container")
.Loaded()
)
|
Property:Loaded
@(Html.EJS().RangeNavigator("container")
.Loaded()
)
|
| Fires when the value changes in range navigator. |
Property:RangeChanged
@(Html.EJ().RangeNavigator("container")
.RangeChanged()
)
|
Property:Changed
@(Html.EJS().RangeNavigator("container")
.Changed()
)
|
| Fires before after resize the RangeNavigator. |
Not Applicable
|
Property:Resized
@(Html.EJS().RangeNavigator("container")
.Resized()
)
|
| Fires before tooltip the RangeNavigator. |
Not Applicable
|
Property:TooltipRender
@(Html.EJS().RangeNavigator("container")
.TooltipRender()
)
|
| Fires before period render in the RangeNavigator. |
Not Applicable
|
Property:SelectorRender
@(Html.EJS().RangeNavigator("container")
.SelectorRender()
)
|
| Fires when scrollStart the RangeNavigator. |
Property:ScrollStart
@(Html.EJ().RangeNavigator("container")
.ScrollStart()
)
|
Not Applicable
|
| Fires when scrollEnd the RangeNavigator. |
Property:ScrollEnd
@(Html.EJ().RangeNavigator("container")
.ScrollEnd()
)
|
Not Applicable
|
| Fires when selected range Start the RangeNavigator. |
Property:SelectedRangeStart
@(Html.EJ().RangeNavigator("container")
.SelectedRangeStart()
)
|
Not Applicable
|
| Fires when selected range ends the RangeNavigator. |
Property:SelectedRangeEnd
@(Html.EJ().RangeNavigator("container")
.SelectedRangeEnd()
)
|
Not Applicable
|
| Fires when scroll range changed in the RangeNavigator. |
Property:ScrollChanged
@(Html.EJ().RangeNavigator("container")
.ScrollChanged()
)
|
Not Applicable
|
| Fires when click in the RangeNavigator. |
Property:Click
@(Html.EJ().RangeNavigator("container")
.Click()
)
|
Not Applicable
|
| Fires when right click in the RangeNavigator. |
Property:RightClick
@(Html.EJ().RangeNavigator("container")
.RightClick()
)
|
Not Applicable
|
| Fires when double click in the RangeNavigator. |
Property:DoubleClick
@(Html.EJ().RangeNavigator("container")
.DoubleClick()
)
|
Not Applicable
|