Search results

Migration from Essential JS 1

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

RangeNavigator

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

Series

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")) )

StyleSettings

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

Tooltip

Behaviour API in Essential JS 1 API in Essential JS 2
tooltip Property:Visible

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Visible(true)) )
Property:Enable

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Enable(true)) )
background color of tooltip Property:BackgroundColor

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.BackgroundColor("red")) )
Property:Fill

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Fill("red")) )
Font style of tooltip Property:Font

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.Font()) )
Property:TextStyle

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.TextStyle()) )
Label format of tooltip Property:LabelFormat

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.LabelFormat("yMd")) )
Property:Format

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Format("yMd")) )
Display mode of tooltip Property:TooltipDisplayMode

@(Html.EJ().RangeNavigator("container") .Tooltip(t => t.TooltipDisplayMode("always")) )
Property:displayMode

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.DisplayMode("always")) )
Template of tooltip Not Applicable Property:Template

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Template("")) )
Border of tooltip Not Applicable Property:Border

@(Html.EJS().RangeNavigator("container") .Tooltip(t => t.Border(b => b.Color("red").Width("2"))) )
Opacity of tooltip Not Applicable Property:Opacity

@(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

(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()

@(Html.EJS().RangeNavigator("container") RangeNavigator.Print())
Export Not Applicable Property:export()

@(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

@(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