From fe381fc9839cea197c163aaf8a9e9756a12a6eaa Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 6 Oct 2025 13:28:25 +0530 Subject: [PATCH 1/2] 983838: Updated the UG content and example changes in the Range Selector control. --- blazor/range-selector/accessibility.md | 33 +++++------ blazor/range-selector/custom.md | 38 ++++++------ blazor/range-selector/data.md | 60 ++++++++----------- blazor/range-selector/events.md | 59 +++++++++++++++---- blazor/range-selector/export.md | 22 +++---- blazor/range-selector/grid-tick.md | 30 +++++----- blazor/range-selector/labels.md | 22 +++---- blazor/range-selector/light-weight.md | 7 +-- blazor/range-selector/period-selector.md | 18 +++--- blazor/range-selector/r-t-l.md | 21 +++---- blazor/range-selector/range.md | 24 ++++---- blazor/range-selector/series-type.md | 14 ++--- blazor/range-selector/tool-tip.md | 33 +++++------ blazor/range-selector/working-with-data.md | 67 +++++++++++----------- 14 files changed, 234 insertions(+), 214 deletions(-) diff --git a/blazor/range-selector/accessibility.md b/blazor/range-selector/accessibility.md index cfb3c25c1a..7a07380802 100644 --- a/blazor/range-selector/accessibility.md +++ b/blazor/range-selector/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Range Selector component and more. +description: Check out and learn about accessibility, keyboard navigation, and compliance in the Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor Range Selector Component -The Blazor Range Selector component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Range Selector component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). -The accessibility compliance for the Blazor Range navigator component is outlined below. +The table below outlines accessibility compliance for the Blazor Range Selector component. | Accessibility Criteria | Compatibility | | -- | -- | @@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Range navigator component is outline | [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | | [Color Contrast](../common/accessibility#color-contrast) | Yes | | [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | | [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
@@ -37,32 +38,32 @@ The accessibility compliance for the Blazor Range navigator component is outline
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Range Selector component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Range Selector component: +The component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns for accessibility. The following ARIA attributes are used: * img (role) * region (role) * aria-label (attribute) * aria-hidden (attribute) -## Keyboard interaction +## Keyboard Interaction -The Blazor Range Selector component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Range Selector component. +The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users relying on assistive technologies or keyboard navigation. Supported keyboard shortcuts: | Windows | Mac | Description | | --- | --- | --- | -| Alt + J | ⌥ + J | Moves the focus to the Range Selector element. | -| Tab | Tab | Moves the focus to the Range Selector element. | -| Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the Range Selector. | +| Alt + J | ⌥ + J | Moves focus to the Range Selector element. | +| Tab | Tab | Moves focus to the Range Selector element. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous element in the Range Selector. | | Ctrl + P | ⌘ + P | Prints the Range Selector. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Range Selector component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Range Selector component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window to evaluate the accessibility of the Blazor Range Selector component with accessibility tools. +Evaluate accessibility in the Blazor Range Selector component by opening the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window and using accessibility tools. -## See also +## See Also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/range-selector/custom.md b/blazor/range-selector/custom.md index a6f40c3d6b..06ea4796cf 100644 --- a/blazor/range-selector/custom.md +++ b/blazor/range-selector/custom.md @@ -1,7 +1,7 @@ --- layout: post title: Customization in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about customization in Syncfusion Blazor Range Selector component and more. +description: Check out and learn here all about customization in Syncfusion Blazor Range Selector component and more. platform: Blazor control: Range Selector documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Navigator Appearance -The Range Selector can be customized by using the [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). The [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) property is used to specify the color for the selected region, whereas the [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) property is used to specify the color for the unselected region. +Customize the Range Selector using [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). Use [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) to set the color for the selected region and [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) for the unselected region. ```cshtml @@ -26,12 +26,13 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings]( -@code{ +@code { public class StockDetails { public double Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = 12, Close = 28 }, new StockDetails { Date = 34, Close = 44 }, @@ -39,8 +40,9 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings]( new StockDetails { Date = 56, Close = 50 }, new StockDetails { Date = 67, Close = 66 }, new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 }, + new StockDetails { Date = 89, Close = 84 } }; + public int[] Value = new int[] { 45, 78 }; } @@ -50,7 +52,7 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings]( ## Thumb -The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html) allows to customize the border, fill color, size, and type of thumb using the [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type) properties. Thumbs can be of two shapes: **Circle** and **Rectangle**. +Customize the thumb's border, fill color, size, and type using [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html), [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type). Thumbs can be **Circle** or **Rectangle**. ```cshtml @@ -69,8 +71,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi -@code{ - +@code { public class StockDetails { public double Date { get; set; } @@ -84,7 +85,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi new StockDetails { Date = 56, Close = 50 }, new StockDetails { Date = 67, Close = 66 }, new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -96,7 +97,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi ## Border -Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html), the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) of the Range Selector border can be customized. +Customize the Range Selector border using [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html). Set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) properties. ```cshtml @@ -111,12 +112,13 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio -@code{ +@code { public class StockDetails { public double Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = 12, Close = 28 }, new StockDetails { Date = 34, Close = 44 }, @@ -126,6 +128,7 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio new StockDetails { Date = 78, Close = 78 }, new StockDetails { Date = 89, Close = 84 }, }; + public int[] Value = new int[] { 45, 78 }; } @@ -135,7 +138,7 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio ## Snapping -The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property toggles the placement of the slider exactly to the left or right at the nearest interval. +Enable the [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property to snap the slider to the nearest interval. ```cshtml @@ -149,7 +152,7 @@ The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char -@code{ +@code { public class StockDetails { public double Date { get; set; } @@ -163,8 +166,9 @@ The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char new StockDetails { Date = 56, Close = 50 }, new StockDetails { Date = 67, Close = 66 }, new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 }, + new StockDetails { Date = 89, Close = 84 } }; + public int[] Value = new int[] { 45, 78 }; } @@ -172,7 +176,7 @@ The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char ## Animation -Animation for the Range Selector is enabled by default. The speed of the animation can be controlled using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default value of the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property is **500** milliseconds. +Animation is enabled by default. Control the speed using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default is **500** milliseconds. ```cshtml @@ -186,12 +190,13 @@ Animation for the Range Selector is enabled by default. The speed of the animati -@code{ +@code { public class StockDetails { public double Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = 12, Close = 28 }, new StockDetails { Date = 34, Close = 44 }, @@ -201,6 +206,7 @@ Animation for the Range Selector is enabled by default. The speed of the animati new StockDetails { Date = 78, Close = 78 }, new StockDetails { Date = 89, Close = 84 }, }; + public int[] Value = new int[] { 45, 78 }; } @@ -209,4 +215,4 @@ Animation for the Range Selector is enabled by default. The speed of the animati ## See Also * [Grid and Tick Lines](./grid-tick/) -* [Labels](./labels/) \ No newline at end of file +* [Labels](./labels/) diff --git a/blazor/range-selector/data.md b/blazor/range-selector/data.md index 053614a237..8651e21f57 100644 --- a/blazor/range-selector/data.md +++ b/blazor/range-selector/data.md @@ -1,7 +1,7 @@ --- layout: post title: Type of Data in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about type of data in Syncfusion Blazor Range Selector component and more. +description: Check out and learn about supported data types and formatting in the Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -13,7 +13,7 @@ documentation: ug ## Numeric -The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_ValueType) of a Range Selector is **Double**. +The numeric scale represents numeric values in the Range Selector. By default, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_ValueType) is **Double**. ```cshtml @@ -26,8 +26,7 @@ The numeric scale is used to represent the numeric values of data in a Range Sel -@code{ - +@code { public class StockDetails { public double Day { get; set; } @@ -54,7 +53,7 @@ The numeric scale is used to represent the numeric values of data in a Range Sel ### Range -The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties. +The minimum and maximum of the scale are calculated automatically based on the data. Customize them using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties. ```cshtml @@ -68,7 +67,6 @@ The minimum and the maximum of the scale will be calculated automatically based @code { - public class StockDetails { public double Date { get; set; } @@ -94,7 +92,7 @@ The minimum and the maximum of the scale will be calculated automatically based new StockDetails { Date = 130, Close = 40 }, new StockDetails { Date = 140, Close = 29 }, new StockDetails { Date = 150, Close = 10 }, - new StockDetails { Date = 160, Close = 16 }, + new StockDetails { Date = 160, Close = 16 } }; } @@ -104,7 +102,7 @@ The minimum and the maximum of the scale will be calculated automatically based ### Label Format -The numeric labels can be formatted using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property and it supports all the globalized formats. +Format numeric labels using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property, which supports all globalized formats. ```cshtml @@ -117,8 +115,7 @@ The numeric labels can be formatted using the [LabelFormat](https://help.syncfus -@code{ - +@code { public class StockDetails { public double Day { get; set; } @@ -143,7 +140,7 @@ The numeric labels can be formatted using the [LabelFormat](https://help.syncfus ![Blazor RangeNavigator with Numeric label format](images/data/blazor-rangenavigator-label-format.png) -The following table shows the results of applying some commonly used label formats to numeric values. +The following table shows the results of applying common label formats to numeric values. @@ -193,19 +190,19 @@ The following table shows the results of applying some commonly used label forma - + - +
1000 c1 $1,000.0The currency symbol is appended to number and the number is rounded to 1 decimal place.The currency symbol is appended and the number is rounded to 1 decimal place.
1000 c2 $1,000.00The currency symbol is appended to number and the number is rounded to 2 decimal places.The currency symbol is appended and the number is rounded to 2 decimal places.
### Custom Label Format -The Range Selector also supports the Custom Label formats using the placeholders such as **{value}$**, in which the value represents the axis label, e.g. 20$. +Custom label formats are supported using placeholders such as **{value}$**, where the value represents the axis label (e.g., 20$). ```cshtml @@ -218,8 +215,7 @@ The Range Selector also supports the Custom Label formats using the placeholders -@code{ - +@code { public class StockDetails { public double Day { get; set; } @@ -236,6 +232,7 @@ The Range Selector also supports the Custom Label formats using the placeholders new StockDetails { Day = 78, Close = 78 }, new StockDetails { Day = 89, Close = 84 } }; + public int[] Value = new int[] { 20, 50 }; } @@ -247,7 +244,7 @@ The Range Selector also supports the Custom Label formats using the placeholders -The Logarithmic supports the logarithmic scale, and it is used to visualize the data when the Range Selector has numerical values in both the lower (e.g.: 10-6) and the higher (e.g.: 106) orders of the magnitude. +The logarithmic scale visualizes data with values in both lower and higher orders of magnitude. Set [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_ValueType) to **Logarithmic**. ```cshtml @@ -261,7 +258,6 @@ The Logarithmic supports the logarithmic scale, and it is used to visualize the @code { - public class StockDetails { public double Day { get; set; } @@ -300,7 +296,7 @@ The Logarithmic supports the logarithmic scale, and it is used to visualize the ### Range -The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), the [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties. +Minimum and maximum values are calculated automatically but can be customized using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) properties. ```cshtml @@ -314,7 +310,6 @@ The minimum and the maximum of the Range Selector will be calculated automatical @code { - public class StockDetails { public double Day { get; set; } @@ -353,7 +348,7 @@ The minimum and the maximum of the Range Selector will be calculated automatical ### Logarithmic Base -The Logarithmic Base can be customized using the [LogBase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LogBase) property. The default value of this property is **10**. +Customize the logarithmic base using the [LogBase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LogBase) property. The default value is **10**. ```cshtml @@ -367,7 +362,6 @@ The Logarithmic Base can be customized using the [LogBase](https://help.syncfusi @code { - public class StockDetails { public double Day { get; set; } @@ -406,7 +400,7 @@ The Logarithmic Base can be customized using the [LogBase](https://help.syncfusi ## DateTime -The Range Selector supports the DateTime scale and displays the DateTime values as labels in the specified format. +The Range Selector supports the DateTime scale and displays DateTime values as labels in the specified format. ```cshtml @@ -419,8 +413,7 @@ The Range Selector supports the DateTime scale and displays the DateTime values -@code{ - +@code { public class StockDetails { public DateTime Date { get; set; } @@ -447,9 +440,7 @@ The Range Selector supports the DateTime scale and displays the DateTime values ### Interval Customization -The DateTime intervals can be customized using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) and the [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_IntervalType) properties of the Range Selector. For example, if the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) is set to 2 and the [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_IntervalType) is set to years, the interval will be considered to be 2 years. - -DateTime supports the following interval types: +Customize DateTime intervals using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Interval) and [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_IntervalType) properties. Supported interval types: * Auto * Years * Quarter @@ -470,8 +461,7 @@ DateTime supports the following interval types: -@code{ - +@code { public class StockDetails { public DateTime Date { get; set; } @@ -498,7 +488,7 @@ DateTime supports the following interval types: ### Label Format -The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property is used to format and parse the date to all globalize format. +Format and parse dates using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property, which supports all globalized formats. ```cshtml @@ -511,8 +501,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts -@code{ - +@code { public class StockDetails { public DateTime Date { get; set; } @@ -529,6 +518,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts new StockDetails { Date = new DateTime(2010, 01, 01), Y = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Y = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; } @@ -536,7 +526,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ![Blazor RangeNavigator with DateTime Label Format](images/data/blazor-rangenavigator-datetime-format.png) -The following table shows the results of applying some common DateTime formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property. +The following table shows the results of applying common DateTime formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property. @@ -576,4 +566,4 @@ The following table shows the results of applying some common DateTime formats t -
12:00:00 AM The label is displayed in hours:minutes:seconds format.
\ No newline at end of file + diff --git a/blazor/range-selector/events.md b/blazor/range-selector/events.md index 6a9dfdadf2..9eaf30289e 100644 --- a/blazor/range-selector/events.md +++ b/blazor/range-selector/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about events in Syncfusion Blazor Range Selector component and much more. +description: Check out and learn about all available events and event handling in the Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Events in Blazor Range Selector Component -This section describes about the Range Selector component's events, that is triggered when appropriate actions are performed. The events should be provided to the Range Selector through the **RangeNavigatorEvents** component. +This section describes the events triggered by the Range Selector component. Events are provided through the **RangeNavigatorEvents** component. -The Range Selector component supports the following events. +Supported events: * [Loaded](events#loaded) * [OnPrintCompleted](events#onprintcompleted) @@ -23,9 +23,10 @@ The Range Selector component supports the following events. ## Loaded -The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Loaded) event triggers, after the Range Selector is rendered. +The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Loaded) event triggers after the Range Selector is rendered. ```cshtml + @using Syncfusion.Blazor.Charts @@ -42,6 +43,7 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Rang public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -51,21 +53,25 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Rang new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void RangeNavigatorLoaded(RangeLoadedEventArgs args) { // Here you can customize your code. } } + ``` ## OnPrintCompleted -The [OnPrintCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_OnPrintCompleted) event triggers, after the Range Selector is printed. +The [OnPrintCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_OnPrintCompleted) event triggers after the Range Selector is printed. ```cshtml + @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Buttons @@ -82,11 +88,13 @@ The [OnPrintCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C @code { public SfRangeNavigator RangeObj; + public class StockDetails { public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -96,23 +104,27 @@ The [OnPrintCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public async Task Click(MouseEventArgs args) { await RangeObj.PrintAsync(); } + public void PrintCompleted(EventArgs args) { // Here you can customize your code. } } + ``` ## Changed -The [Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Changed) event triggers, whenever the slider position is changed. The following arguments are present in this event: +The [Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Changed) event triggers when the slider position changes. Arguments include: * [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChangedEventArgs.html#Syncfusion_Blazor_Charts_ChangedEventArgs_Start) - Specifies the start value. * [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChangedEventArgs.html#Syncfusion_Blazor_Charts_ChangedEventArgs_End) - Specifies the end value. @@ -121,6 +133,7 @@ The [Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ran * [SelectedData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChangedEventArgs.html#Syncfusion_Blazor_Charts_ChangedEventArgs_SelectedData) - The selected data collection can be accessed in this argument. ```cshtml + @using Syncfusion.Blazor.Charts @@ -137,6 +150,7 @@ The [Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ran public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -146,24 +160,28 @@ The [Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ran new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void SliderChanged(ChangedEventArgs args) { // Here you can customize your code. } } + ``` ## Resized -The [Resized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Resized) event triggers, when the browser window is resized. The following arguments are present in this event: +The [Resized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_Resized) event triggers when the browser window is resized. Arguments include: * [CurrentSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeResizeEventArgs.html#Syncfusion_Blazor_Charts_RangeResizeEventArgs_CurrentSize) - Specifies the current size for the Range Selector. * [PreviousSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeResizeEventArgs.html#Syncfusion_Blazor_Charts_RangeResizeEventArgs_PreviousSize) - Specifies the previous size for the Range Selector. ```cshtml + @using Syncfusion.Blazor.Charts @@ -180,6 +198,7 @@ The [Resized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ran public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -189,19 +208,22 @@ The [Resized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ran new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void RangeNavigatorResized(RangeResizeEventArgs args) { // Here you can customize your code. } } + ``` ## LabelRender -Before rendering each axis label, the [LabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_LabelRender) event is triggered. The following arguments are present in this event: +The [LabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_LabelRender) event triggers before rendering each axis label. Arguments include: * [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeLabelRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeLabelRenderEventArgs_Text) - Specifies the current axis label text. * [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeLabelRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeLabelRenderEventArgs_Value) - Specifies the current axis label value. @@ -209,6 +231,7 @@ Before rendering each axis label, the [LabelRender](https://help.syncfusion.com/ * [LabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeLabelRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeLabelRenderEventArgs_LabelStyle) - Specifies the current axis label style. ```cshtml + @using Syncfusion.Blazor.Charts @@ -225,6 +248,7 @@ Before rendering each axis label, the [LabelRender](https://help.syncfusion.com/ public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -234,24 +258,28 @@ Before rendering each axis label, the [LabelRender](https://help.syncfusion.com/ new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void LabelCustomization(RangeLabelRenderEventArgs args) { // Here you can customize your code. } } + ``` ## TooltipRender -The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_TooltipRender) event triggers before the tooltip is rendered. The following arguments are present in this event: +The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_TooltipRender) event triggers before the tooltip is rendered. Arguments include: * [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeTooltipRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeTooltipRenderEventArgs_Text) - Specifies the current tooltip text. * [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeTooltipRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeTooltipRenderEventArgs_TextStyle) - Specifies the current tooltip text style. ```cshtml + @using Syncfusion.Blazor.Charts @@ -268,6 +296,7 @@ The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -277,25 +306,29 @@ The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void TooltipCustomization(RangeTooltipRenderEventArgs args) { // Here you can customize your code. } } + ``` ## SelectorRender -The [SelectorRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_SelectorRender) event triggers before the period selector is rendered. The following arguments are present in this event: +The [SelectorRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorEvents.html#Syncfusion_Blazor_Charts_RangeNavigatorEvents_SelectorRender) event triggers before the period selector is rendered. Arguments include: * [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeSelectorRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeSelectorRenderEventArgs_Content) - Specifies the content for the calendar in the period selector. * [EnableCustomFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeSelectorRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeSelectorRenderEventArgs_EnableCustomFormat) - Enables to show the content for the calendar in the period selector. By default it is true. * [Selector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeSelectorRenderEventArgs.html#Syncfusion_Blazor_Charts_RangeSelectorRenderEventArgs_Selector) - Specifies the period selector collection. ```cshtml + @using Syncfusion.Blazor.Charts @@ -323,6 +356,7 @@ The [SelectorRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha public DateTime Date { get; set; } public double Close { get; set; } } + public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, @@ -332,12 +366,15 @@ The [SelectorRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; + public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public void SelectorCustomization(RangeSelectorRenderEventArgs args) { // Here you can customize your code. } } -``` \ No newline at end of file + +``` diff --git a/blazor/range-selector/export.md b/blazor/range-selector/export.md index a0ab7c7498..4e90ea7baa 100644 --- a/blazor/range-selector/export.md +++ b/blazor/range-selector/export.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about print and export in Syncfusion Blazor Range Selector component and more. +description: Check out and learn how to utilize the print and export functionality in Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Print -The rendered Range Selector can be printed directly from the browser by calling the public method `PrintAsync`. +Print the rendered Range Selector directly from the browser by calling the public method `PrintAsync`. ```cshtml @@ -59,11 +59,11 @@ The rendered Range Selector can be printed directly from the browser by calling ## Export -The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, **PDF**, **XLSX**, or **CSV** format by using the `ExportAsync` method in the Range Selector. This method contains the following parameters: +Export the rendered Range Selector to **JPEG**, **PNG**, **SVG**, **PDF**, **XLSX**, or **CSV** formats using the `ExportAsync` method. This method accepts the following parameters: -* **Type** - To specify the export type. The component can be exported to **JPEG**, **PNG**, **SVG**, **PDF**, **XLSX**, or **CSV** format. -* **File name** - To specify the file name to export. -* **Orientation** - To specify the orientation type. This is applicable only for PDF export type. It is an optional parameter. +* **Type** – Specifies the export type (JPEG, PNG, SVG, PDF, XLSX, or CSV). +* **File name** – Specifies the file name for export. +* **Orientation** – Specifies the orientation type (applicable only for PDF export; optional). ```cshtml @@ -93,12 +93,12 @@ The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, **PDF public List StockInfo = new List { new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, - new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, - new StockDetails { Date = new DateTime(2007, 01, 01), Close = 36 }, - new StockDetails { Date = new DateTime(2008, 01, 01), Close = 38 }, + new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, + new StockDetails { Date = new DateTime(2007, 01, 01), Close = 36 }, + new StockDetails { Date = new DateTime(2008, 01, 01), Close = 38 }, new StockDetails { Date = new DateTime(2009, 01, 01), Close = 54 }, - new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, - new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } + new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, + new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; public async Task Click(MouseEventArgs args) diff --git a/blazor/range-selector/grid-tick.md b/blazor/range-selector/grid-tick.md index 245097dfb2..caaa43d822 100644 --- a/blazor/range-selector/grid-tick.md +++ b/blazor/range-selector/grid-tick.md @@ -1,7 +1,7 @@ --- layout: post title: Grid Lines and Tick Lines in Blazor Range Selector | Syncfusion -description: Learn here all about grid lines and tick lines in Syncfusion Blazor Range Selector component, it's elements and more. +description: Check out and learn about customizing grid lines and tick lines in the Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Gridline Customization -The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Color), and [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_DashArray) of the major gridlines can be customized by using the [RangeNavigatorMajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorGridLines.html) setting. +Gridlines indicate axis divisions and provide visual cues, especially for large or complex charts. Customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_Color), and [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorGridLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorGridLines_DashArray) of major gridlines using the [RangeNavigatorMajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorGridLines.html) setting. ```cshtml @@ -26,7 +26,6 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu @code { - public class StockDetails { public double Date { get; set; } @@ -36,11 +35,11 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu public int[] Value = new int[] { 25, 40 }; public List StockInfo = new List { - new StockDetails { Date= 10, Close= 35 }, - new StockDetails { Date= 20, Close= 28 }, - new StockDetails { Date= 30, Close= 34 }, - new StockDetails { Date= 40, Close= 32 }, - new StockDetails { Date= 50, Close= 40 } + new StockDetails { Date = 10, Close = 35 }, + new StockDetails { Date = 20, Close = 28 }, + new StockDetails { Date = 30, Close = 34 }, + new StockDetails { Date = 40, Close = 32 }, + new StockDetails { Date = 50, Close = 40 } }; } @@ -50,7 +49,7 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu ## Tickline Customization -Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Color), and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Height) of the major ticklines can be customized by using the [RangeNavigatorMajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorTickLines.html) setting. +Ticklines are small lines drawn on the axis to represent axis labels. By default, ticklines are drawn outside the axis. Customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Width), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Color), and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMajorTickLines.html#Syncfusion_Blazor_Charts_ChartCommonMajorTickLines_Height) of major ticklines using the [RangeNavigatorMajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorMajorTickLines.html) setting. ```cshtml @@ -65,7 +64,6 @@ Ticklines are the small lines which is drawn on the axis line representing the a @code { - public class StockDetails { public double Date { get; set; } @@ -75,14 +73,14 @@ Ticklines are the small lines which is drawn on the axis line representing the a public int[] Value = new int[] { 25, 40 }; public List StockInfo = new List { - new StockDetails { Date= 10, Close= 35 }, - new StockDetails { Date= 20, Close= 28 }, - new StockDetails { Date= 30, Close= 34 }, - new StockDetails { Date= 40, Close= 32 }, - new StockDetails { Date= 50, Close= 40 } + new StockDetails { Date = 10, Close = 35 }, + new StockDetails { Date = 20, Close = 28 }, + new StockDetails { Date = 30, Close = 34 }, + new StockDetails { Date = 40, Close = 32 }, + new StockDetails { Date = 50, Close = 40 } }; } ``` -![Blazor RangeNavigator with tick line](images/grid-tick/blazor-rangenavigator-tick-line.png) \ No newline at end of file +![Blazor RangeNavigator with tick line](images/grid-tick/blazor-rangenavigator-tick-line.png) diff --git a/blazor/range-selector/labels.md b/blazor/range-selector/labels.md index f5a9e978d6..3a615ea7d0 100644 --- a/blazor/range-selector/labels.md +++ b/blazor/range-selector/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Labels in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about labels in Syncfusion Blazor Range Selector component and much more. +description: Check out and learn how to configure and customize labels in Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Labels in Blazor Range Selector Component -## Multi-level labels +## Multi-level Labels -The multi-level labels for the Range Selector can be enabled by setting the [EnableGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_EnableGrouping) property to **true**. This is restricted to the DateTime axis alone. +Enable multi-level labels by setting the [EnableGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_EnableGrouping) property to **true**. This feature is available only for the DateTime axis. ```cshtml @@ -48,7 +48,7 @@ The multi-level labels for the Range Selector can be enabled by setting the [Ena ## Grouping -The multi-level labels can be grouped using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_GroupBy) property with the following interval types: +Group multi-level labels using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_GroupBy) property. Supported interval types: * Auto * Years @@ -71,7 +71,6 @@ The multi-level labels can be grouped using the [GroupBy](https://help.syncfusio @code { - public class StockDetails { public DateTime X { get; set; } @@ -95,9 +94,9 @@ The multi-level labels can be grouped using the [GroupBy](https://help.syncfusio ![Grouping in Blazor RangeNavigator](images/labels/blazor-rangenavigator-grouping.png) -## Smart labels +## Smart Labels -The [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelIntersectAction) property is used to avoid overlapping of labels. The following code sample shows the setting of [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelIntersectAction) property to **Hide**. +Use the [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelIntersectAction) property to avoid label overlap. For example, set it to **Hide** to hide overlapping labels. ```cshtml @@ -112,7 +111,6 @@ The [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @code { - public class SampleData { public DateTime X { get; set; } @@ -138,7 +136,7 @@ The [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## Position -By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelPosition) property. +Labels are placed **outside** the Range Selector by default. Use the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelPosition) property to place them inside if needed. ```cshtml @@ -152,7 +150,6 @@ By default, the labels can be placed outside the Range Selector. It can also be @code { - public class StockDetails { public DateTime X { get; set; } @@ -178,7 +175,7 @@ By default, the labels can be placed outside the Range Selector. It can also be ## Labels Customization -The font size, color, family, etc. can be customized using the [RangeNavigatorLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorLabelStyle.html) setting. +Customize label font size, color, family, and more using the [RangeNavigatorLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorLabelStyle.html) setting. ```cshtml @@ -190,7 +187,6 @@ The font size, color, family, etc. can be customized using the [RangeNavigatorLa @code { - public class StockDetails { public DateTime X { get; set; } @@ -212,4 +208,4 @@ The font size, color, family, etc. can be customized using the [RangeNavigatorLa ``` -![Blazor RangeNavigator with Custom Label](images/labels/blazor-rangenavigator-custom-label.png) \ No newline at end of file +![Blazor RangeNavigator with Custom Label](images/labels/blazor-rangenavigator-custom-label.png) diff --git a/blazor/range-selector/light-weight.md b/blazor/range-selector/light-weight.md index b02fc792f1..96c2c27dd6 100644 --- a/blazor/range-selector/light-weight.md +++ b/blazor/range-selector/light-weight.md @@ -1,7 +1,7 @@ --- layout: post title: Lightweight in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about lightweight in Syncfusion Blazor Range Selector component and more. +description: Check out and learn here all about lightweight in Syncfusion Blazor Range Selector component and more. platform: Blazor control: Range Selector documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Lightweight in Blazor Range Selector Component -By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DataSource) for [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) is empty, a lightweight Range Selector will be shown without Chart. +By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DataSource) for [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) is empty, a lightweight Range Selector is displayed without a chart. ```cshtml @@ -21,7 +21,6 @@ By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusi @code { - public class SampleData { public DateTime X { get; set; } @@ -48,4 +47,4 @@ By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusi ## See Also -* [Period Selector](./period-selector/) \ No newline at end of file +* [Period Selector](./period-selector/) diff --git a/blazor/range-selector/period-selector.md b/blazor/range-selector/period-selector.md index c2d32f6497..dac0916bb1 100644 --- a/blazor/range-selector/period-selector.md +++ b/blazor/range-selector/period-selector.md @@ -1,7 +1,7 @@ --- layout: post title: Period Selector in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about period selector in Syncfusion Blazor Range Selector component and more. +description: Check out and learn how to configure and customize period selector in Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Period Selector in Blazor Range Selector Component -The period selector allows to choose a time range with specific periods. +The period selector enables users to choose a time range using predefined periods. ## Periods -An array of objects that allows the users to specify pre-defined time intervals. The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Interval) property specifies the count value of the button, the [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Selected) property allows the users to select the period button initially, and the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Text) property specifies the text to be displayed on the button. The [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_IntervalType) property allows the users to customize the interval type and it supports the following types: +Configure an array of objects to specify predefined time intervals. The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Interval) property sets the count value for each button, [Selected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Selected) allows initial selection, and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_Text) sets the button label. The [IntervalType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriod.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriod_IntervalType) property customizes the interval type, supporting: * Auto * Years @@ -47,7 +47,6 @@ An array of objects that allows the users to specify pre-defined time intervals. @code { - public class StockDetails { public DateTime Date { get; set; } @@ -74,7 +73,7 @@ An array of objects that allows the users to specify pre-defined time intervals. ## Position -The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriodSelectorSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriodSelectorSettings_Position) property allows the users to position the period selector at the **Top** or **Bottom**. +Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriodSelectorSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriodSelectorSettings_Position) property to place the period selector at the **Top** or **Bottom** of the Range Selector. ```cshtml @@ -98,7 +97,6 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ra @code { - public class StockDetails { public DateTime Date { get; set; } @@ -125,7 +123,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ra ## Height -The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriodSelectorSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriodSelectorSettings_Height) property allows the users to specify the height of the period selector. The default value of the height property is **43px**. +Set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorPeriodSelectorSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorPeriodSelectorSettings_Height) property to specify the height of the period selector. The default is **43px**. ```cshtml @@ -149,7 +147,6 @@ The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Rang @code { - public class StockDetails { public DateTime Date { get; set; } @@ -176,7 +173,7 @@ The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Rang ## Visibility -The [DisableRangeSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DisableRangeSelector) property allows the users to display only the period selector and not the Range Selector. +The [DisableRangeSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DisableRangeSelector) property displays only the period selector, hiding the Range Selector. ```cshtml @@ -200,7 +197,6 @@ The [DisableRangeSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @code { - public class StockDetails { public DateTime Date { get; set; } @@ -225,4 +221,4 @@ The [DisableRangeSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ## See Also -* [Disable Range Selector](./light-weight) \ No newline at end of file +* [Disable Range Selector](./light-weight) diff --git a/blazor/range-selector/r-t-l.md b/blazor/range-selector/r-t-l.md index 54dafe51a8..1765c352f8 100644 --- a/blazor/range-selector/r-t-l.md +++ b/blazor/range-selector/r-t-l.md @@ -1,7 +1,7 @@ --- layout: post title: RTL in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about RTL in Syncfusion Blazor Range Selector component and much more details. +description: Check out and learn how to enable right-to-left (RTL) support in the Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -9,7 +9,7 @@ documentation: ug # RTL in Blazor Range Selector Component -The Range Selector supports right-to-left (RTL), which can be enabled with the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_EnableRtl) property. +The Range Selector supports right-to-left (RTL) rendering. Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_EnableRtl) property to **true**. ```cshtml @@ -33,15 +33,16 @@ The Range Selector supports right-to-left (RTL), which can be enabled with the [ public List StockInfo = new List { - new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21, }, - new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24, }, - new StockDetails { Date = new DateTime(2007, 01, 01), Close = 36, }, - new StockDetails { Date = new DateTime(2008, 01, 01), Close = 38, }, - new StockDetails { Date= new DateTime(2009, 01, 01), Close = 54, }, - new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57, }, - new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70, } + new StockDetails { Date = new DateTime(2005, 01, 01), Close = 21 }, + new StockDetails { Date = new DateTime(2006, 01, 01), Close = 24 }, + new StockDetails { Date = new DateTime(2007, 01, 01), Close = 36 }, + new StockDetails { Date = new DateTime(2008, 01, 01), Close = 38 }, + new StockDetails { Date = new DateTime(2009, 01, 01), Close = 54 }, + new StockDetails { Date = new DateTime(2010, 01, 01), Close = 57 }, + new StockDetails { Date = new DateTime(2011, 01, 01), Close = 70 } }; } + ``` -![Right to Left in Blazor RangeNavigator](images/common/blazor-rangenavigator-rght-to-left.png) \ No newline at end of file +![Right to Left in Blazor RangeNavigator](images/common/blazor-rangenavigator-rght-to-left.png) diff --git a/blazor/range-selector/range.md b/blazor/range-selector/range.md index bd605368c6..dec9f60f60 100644 --- a/blazor/range-selector/range.md +++ b/blazor/range-selector/range.md @@ -1,7 +1,7 @@ --- layout: post title: Range in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about range in Syncfusion Blazor Range Selector component and much more. +description: Check out and learn here all about ranges in Syncfusion Blazor Range Selector component and much more. platform: Blazor control: Range Selector documentation: ug @@ -9,24 +9,24 @@ documentation: ug # Range in Blazor Range Selector Component -The Range Selector's left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways: +The Range Selector's left and right thumbs indicate the selected range in a large data collection. A range can be selected in the following ways: -* By dragging the thumbs. -* By tapping on the labels. -* By setting the start and the end through the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Value) property. +* Dragging the thumbs +* Tapping on the labels +* Setting the start and end through the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Value) property ## Value Binding -This section describes how to bind the value to the Range Selector component in the following ways: +This section describes how to bind values to the Range Selector component: * One-way binding * Two-way binding -### One-way binding +### One-way Binding -As shown in the following example, the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Value) property can be used directly as an object or from code-behind for the Range Selector. +Use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_Value) property directly as an object or from code-behind for the Range Selector. ```cshtml @@ -42,7 +42,6 @@ As shown in the following example, the [Value](https://help.syncfusion.com/cr/bl @code { - public class StockDetails { public DateTime Date { get; set; } @@ -67,9 +66,9 @@ As shown in the following example, the [Value](https://help.syncfusion.com/cr/bl ![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.png) -### Two-way binding +### Two-way Binding -The **@bind-Value** code-behind attribute in the Range Selector can be used to achieve two-way binding. The following example shows how to achieve two-way binding for the Range Selector. +Use the **@bind-Value** attribute in the Range Selector to achieve two-way binding. The following example demonstrates two-way binding for the Range Selector. ```cshtml @@ -85,7 +84,6 @@ The **@bind-Value** code-behind attribute in the Range Selector can be used to a @code { - public class StockDetails { public DateTime Date { get; set; } @@ -108,4 +106,4 @@ The **@bind-Value** code-behind attribute in the Range Selector can be used to a ``` -![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.png) \ No newline at end of file +![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.png) diff --git a/blazor/range-selector/series-type.md b/blazor/range-selector/series-type.md index 87f3b03e0f..54a93d18a3 100644 --- a/blazor/range-selector/series-type.md +++ b/blazor/range-selector/series-type.md @@ -1,7 +1,7 @@ --- layout: post title: Series Type in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about Series Type in Syncfusion Blazor Range Selector component and more. +description: Check out and learn here all about Series Types in Syncfusion Blazor Range Selector component and more. platform: Blazor control: Range Selector documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Series Type in Blazor Range Selector Component -To render the data, the Range Selector supports three types of series. +The Range Selector supports three types of series for rendering data. @@ -17,7 +17,7 @@ To render the data, the Range Selector supports three types of series. -To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) as **Line**. By default, the line series is rendered in the Range Selector. +To render a line series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) to **Line**. By default, the line series is rendered in the Range Selector. ```cshtml @@ -31,7 +31,6 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor @code { - public class StockDetails { public DateTime Date { get; set; } @@ -58,7 +57,7 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor ## Area -To render an area series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) as **Area**. +To render an area series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) to **Area**. ```cshtml @@ -72,7 +71,6 @@ To render an area series, use series [Type](https://help.syncfusion.com/cr/blazo @code { - public class StockDetails { public DateTime Date { get; set; } @@ -99,7 +97,7 @@ To render an area series, use series [Type](https://help.syncfusion.com/cr/blazo ## Step Line -To render a Step line series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) as **Step Line**. +To render a step line series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Type) to **Step Line**. ```cshtml @@ -135,4 +133,4 @@ To render a Step line series, use series [Type](https://help.syncfusion.com/cr/b ``` -![Blazor RangeNavigator with StepLine Series](images/series-type/blazor-rangenavigator-stepline-series.png) \ No newline at end of file +![Blazor RangeNavigator with StepLine Series](images/series-type/blazor-rangenavigator-stepline-series.png) diff --git a/blazor/range-selector/tool-tip.md b/blazor/range-selector/tool-tip.md index 41fe4b378a..642f053392 100644 --- a/blazor/range-selector/tool-tip.md +++ b/blazor/range-selector/tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about tooltip in Syncfusion Blazor Range Selector component and much more. +description: Check out and learn how to enable and customize tooltip in Syncfusion Blazor Range Selector component. platform: Blazor control: Range Selector documentation: ug @@ -11,13 +11,13 @@ documentation: ug -The tooltip for sliders are supported by the Range Selector. Sliders are used in the Range Selector to select data from a specific range. The tooltip displays the selected start and end values. +The Range Selector supports tooltips for sliders, displaying the selected start and end values. -## Enable tooltip +## Enable Tooltip -The tooltip can be used to display information about the selected data and it is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Enable) property to **true**. +Enable the tooltip by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Enable) property to **true**. ```cshtml @@ -33,7 +33,6 @@ The tooltip can be used to display information about the selected data and it is @code { - public class StockDetails { public DateTime Date { get; set; } @@ -60,15 +59,15 @@ The tooltip can be used to display information about the selected data and it is ## Tooltip Customization -The tooltip can be customized using the following properties: +Customize the tooltip using these properties: -* [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Enable) - Customizes the visibility of the tooltip. -* [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_DisplayMode) - Customizes the display mode of the tooltip. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Fill) - Customizes the background color of the tooltip. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Opacity) - Customizes the opacity of the tooltip. -* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Format) - Customizes the format of the tooltip text. -* [RangeNavigatorTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipTextStyle.html) - Customizes the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipTextStyle.html#Syncfusion_Blazor_Charts_RangeNavigatorTooltipTextStyle_Size), the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_Color), the [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontFamily), the [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontStyle), the [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontWeight), the [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_TextAlignment) and the [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_TextOverflow) of the tooltip text. -* [RangeNavigatorTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipBorder.html) - Customizes the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) of the tooltip border. +* [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Enable) – Controls tooltip visibility. +* [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_DisplayMode) – Sets the display mode. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Fill) – Sets the background color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Opacity) – Sets the opacity. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorRangeTooltipSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorRangeTooltipSettings_Format) – Sets the tooltip text format. +* [RangeNavigatorTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipTextStyle.html) – Customizes the [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipTextStyle.html#Syncfusion_Blazor_Charts_RangeNavigatorTooltipTextStyle_Size), the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_Color), the [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontFamily), the [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontStyle), the [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_FontWeight), the [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_TextAlignment) and the [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonFont.html#Syncfusion_Blazor_Charts_ChartCommonFont_TextOverflow) of the tooltip text. +* [RangeNavigatorTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorTooltipBorder.html) – Customizes the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) of the tooltip border. ```cshtml @@ -85,7 +84,6 @@ The tooltip can be customized using the following properties: @code { - public class StockDetails { public DateTime Date { get; set; } @@ -112,7 +110,7 @@ The tooltip can be customized using the following properties: ## Label Format -The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property in the tooltip is used to format and parse the date to all globalize formats. +Use the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property to format and parse dates in the tooltip. ```cshtml @@ -128,7 +126,6 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts @code { - public class StockDetails { public DateTime Date { get; set; } @@ -153,7 +150,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ![Changing Tooltip Format in Blazor RangeNavigator](images/tooltip/blazor-rangenavigator-tooltip-format.png) -The following table shows the results of applying some common date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property. +The following table shows the results of applying common date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property. @@ -193,4 +190,4 @@ The following table shows the results of applying some common date and time form -
12:00:00 AM The label is displayed in hours:minutes:seconds format.
\ No newline at end of file + diff --git a/blazor/range-selector/working-with-data.md b/blazor/range-selector/working-with-data.md index 8512d14908..0cce76dbf8 100644 --- a/blazor/range-selector/working-with-data.md +++ b/blazor/range-selector/working-with-data.md @@ -1,7 +1,7 @@ --- layout: post title: Working with Data in Blazor Range Selector Component | Syncfusion -description: Checkout and learn here all about Working with Data in Syncfusion Blazor Range Selector Component and much more. +description: Check out and learn how to bind and manage data Syncfusion Blazor Range Selector Component and much more. platform: Blazor control: Chart documentation: ug @@ -11,15 +11,15 @@ documentation: ug # Working with Data in Blazor Range Selector Component -The Range Selector uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property value or a list of business objects. +The Range Selector uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), supporting both RESTful JSON data services and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) can be set using either the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property or a list of business objects. -It supports the following data binding methods: +Supported data binding methods: * List binding * Remote data -## List binding +## List Binding -To do list binding to the Range Selector, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. +To bind a list to the Range Selector, assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. The data source can also be provided as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. ```cshtml @@ -33,7 +33,6 @@ To do list binding to the Range Selector, you can assign a IEnumerable object to @code { - public class StockDetails { public DateTime Date { get; set; } @@ -58,11 +57,11 @@ To do list binding to the Range Selector, you can assign a IEnumerable object to ![Blazor Range Navigator with List](images/working-data/blazor-range-list-binding.png) -N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. +N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data binding. -### ExpandoObject binding +### ExpandoObject Binding -Range Selector is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the Range Selector as a list of **ExpandoObject**. The **ExpandoObject** can be bound to Range Selector by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. +Range Selector is a generic component strongly bound to a model type. When the model type is unknown at compile time, data can be bound as a list of **ExpandoObject**. Assign the **ExpandoObject** list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. ```cshtml @@ -76,12 +75,14 @@ Range Selector is a generic component which is strongly bound to a model type. T -@code{ +@code { private List Dates = new List { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) }; public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + public List StockInfo { get; set; } = new List(); private Random randomNum = new Random(); + protected override void OnInitialized() { StockInfo = Enumerable.Range(0, 6).Select((x) => @@ -91,16 +92,16 @@ Range Selector is a generic component which is strongly bound to a model type. T d.Y = randomNum.Next(20, 70); return d; }).Cast().ToList(); - } - + } } + ``` ![Blazor Range Navigator with ExpandoObject](images/working-data/blazor-range-expando-object.png) -### DynamicObject binding +### DynamicObject Binding -Range Selector supports **DynamicObject** data source when the model type is unknown. The **DynamicObject** can be bound to Range Selector by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. +Range Selector supports **DynamicObject** as a data source when the model type is unknown. Assign the **DynamicObject** list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. ```cshtml @@ -114,14 +115,14 @@ Range Selector supports **DynamicObject** data source when the model type is unk - -@code{ - +@code { private List Dates = new List { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) }; public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + private Random randomNum = new Random(); public List MedalDetails = new List() { }; + protected override void OnInitialized() { MedalDetails = Enumerable.Range(0, 5).Select((x) => @@ -132,6 +133,7 @@ Range Selector supports **DynamicObject** data source when the model type is unk return d; }).Cast().ToList(); } + public class DynamicDictionary : DynamicObject { Dictionary dictionary = new Dictionary(); @@ -141,6 +143,7 @@ Range Selector supports **DynamicObject** data source when the model type is unk string name = binder.Name; return dictionary.TryGetValue(name, out result); } + public override bool TrySetMember(SetMemberBinder binder, object value) { dictionary[binder.Name] = value; @@ -152,18 +155,17 @@ Range Selector supports **DynamicObject** data source when the model type is unk return this.dictionary?.Keys; } } - } ``` ![Blazor Range Navigator with DynamicObject](images/working-data/blazor-range-dynamic-object.png) -## Remote data +## Remote Data -### Binding with OData services +### Binding with OData Services -[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). Refer to the following code example for remote data binding using OData service. +[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. Retrieve data from an OData service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The following example demonstrates remote data binding using an OData service. ```cshtml @@ -182,9 +184,9 @@ Range Selector supports **DynamicObject** data source when the model type is unk ![Blazor Range Navigator with OData Adaptor](images/working-data/blazor-range-remote-data.png) -### Binding with OData v4 services +### Binding with OData v4 Services -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services. For more information, see the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the **ODataV4Adaptor**. ```cshtml @@ -205,9 +207,10 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ### Web API -The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) can be used to bind a Range Selector to a Web API created using an [OData](https://www.odata.org/documentation/odata-version-3-0/) endpoint. +Use the [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) to bind a Range Selector to a Web API created with an [OData](https://www.odata.org/documentation/odata-version-3-0/) endpoint. ```cshtml + @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Charts @@ -223,13 +226,12 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ![Blazor Range Navigator with Web API](images/working-data/blazor-range-remote-data.png) -### Sending additional parameters to the server - -To create a data request with a custom parameter, add additional parameters to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Query) object and assign it to the Range Selector's `Query` property. +### Sending Additional Parameters to the Server -The following sample code shows how to send parameters using the `Query` property in the series. +To send custom parameters in a data request, add them to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_Query) object and assign it to the Range Selector's `Query` property. ```cshtml + @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Charts @@ -248,14 +250,14 @@ The following sample code shows how to send parameters using the `Query` propert { RNQuery = new Query().Take(10).Where("Freight", "GreaterThan", 300, false); } - } + ``` ![Blazor Range Navigator with Query](images/working-data/blazor-range-remote-data.png) -## Observable collection +## Observable Collection -The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) provides notification when the dynamic changes of adding, removing, moving, and clearing the collection occur. +The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) provides notifications when items are added, removed, or moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) notifies when dynamic changes occur in the collection. ```cshtml @@ -299,8 +301,9 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c this.ChartPoints = RangeData.GetData(); } } + ``` ![Blazor Chart with Web API Binding](images/working-data/blazor-range-observable-collection.png) -N> Refer to our [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) feature tour page for its groundbreaking feature representations and also explore our [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator?theme=fluent) to know various Range Selector types and how to represent time-dependent data, showing trends at equal intervals. \ No newline at end of file +N> Refer to the [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) feature tour page for feature highlights, and explore the [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator?theme=fluent) to see various types and time-dependent data representations. From 16477de977c89fe0d4f966a4e2727d6bf7119861 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Wed, 8 Oct 2025 16:18:10 +0530 Subject: [PATCH 2/2] 982808: Resolved the font matter error in the PR. --- blazor/range-selector/custom.md | 74 +++++++++++++-------------- blazor/range-selector/light-weight.md | 2 +- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/blazor/range-selector/custom.md b/blazor/range-selector/custom.md index 06ea4796cf..ac7fb4b44e 100644 --- a/blazor/range-selector/custom.md +++ b/blazor/range-selector/custom.md @@ -34,13 +34,13 @@ Customize the Range Selector using [RangeNavigatorStyleSettings](https://help.sy } public List StockInfo = new List { - new StockDetails { Date = 12, Close = 28 }, - new StockDetails { Date = 34, Close = 44 }, - new StockDetails { Date = 45, Close = 48 }, - new StockDetails { Date = 56, Close = 50 }, - new StockDetails { Date = 67, Close = 66 }, - new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 } + new StockDetails { Date = 12, Close = 28 }, + new StockDetails { Date = 34, Close = 44 }, + new StockDetails { Date = 45, Close = 48 }, + new StockDetails { Date = 56, Close = 50 }, + new StockDetails { Date = 67, Close = 66 }, + new StockDetails { Date = 78, Close = 78 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -79,13 +79,13 @@ Customize the thumb's border, fill color, size, and type using [RangeNavigatorTh } public List StockInfo = new List { - new StockDetails { Date = 12, Close = 28 }, - new StockDetails { Date = 34, Close = 44 }, - new StockDetails { Date = 45, Close = 48 }, - new StockDetails { Date = 56, Close = 50 }, - new StockDetails { Date = 67, Close = 66 }, - new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 } + new StockDetails { Date = 12, Close = 28 }, + new StockDetails { Date = 34, Close = 44 }, + new StockDetails { Date = 45, Close = 48 }, + new StockDetails { Date = 56, Close = 50 }, + new StockDetails { Date = 67, Close = 66 }, + new StockDetails { Date = 78, Close = 78 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -120,13 +120,13 @@ Customize the Range Selector border using [RangeNavigatorBorder](https://help.sy } public List StockInfo = new List { - new StockDetails { Date = 12, Close = 28 }, - new StockDetails { Date = 34, Close = 44 }, - new StockDetails { Date = 45, Close = 48 }, - new StockDetails { Date = 56, Close = 50 }, - new StockDetails { Date = 67, Close = 66 }, - new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 }, + new StockDetails { Date = 12, Close = 28 }, + new StockDetails { Date = 34, Close = 44 }, + new StockDetails { Date = 45, Close = 48 }, + new StockDetails { Date = 56, Close = 50 }, + new StockDetails { Date = 67, Close = 66 }, + new StockDetails { Date = 78, Close = 78 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -160,13 +160,13 @@ Enable the [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz } public List StockInfo = new List { - new StockDetails { Date = 12, Close = 28 }, - new StockDetails { Date = 34, Close = 44 }, - new StockDetails { Date = 45, Close = 48 }, - new StockDetails { Date = 56, Close = 50 }, - new StockDetails { Date = 67, Close = 66 }, - new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 } + new StockDetails { Date = 12, Close = 28 }, + new StockDetails { Date = 34, Close = 44 }, + new StockDetails { Date = 45, Close = 48 }, + new StockDetails { Date = 56, Close = 50 }, + new StockDetails { Date = 67, Close = 66 }, + new StockDetails { Date = 78, Close = 78 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -198,13 +198,13 @@ Animation is enabled by default. Control the speed using the [AnimationDuration] } public List StockInfo = new List { - new StockDetails { Date = 12, Close = 28 }, - new StockDetails { Date = 34, Close = 44 }, - new StockDetails { Date = 45, Close = 48 }, - new StockDetails { Date = 56, Close = 50 }, - new StockDetails { Date = 67, Close = 66 }, - new StockDetails { Date = 78, Close = 78 }, - new StockDetails { Date = 89, Close = 84 }, + new StockDetails { Date = 12, Close = 28 }, + new StockDetails { Date = 34, Close = 44 }, + new StockDetails { Date = 45, Close = 48 }, + new StockDetails { Date = 56, Close = 50 }, + new StockDetails { Date = 67, Close = 66 }, + new StockDetails { Date = 78, Close = 78 }, + new StockDetails { Date = 89, Close = 84 } }; public int[] Value = new int[] { 45, 78 }; @@ -214,5 +214,5 @@ Animation is enabled by default. Control the speed using the [AnimationDuration] ## See Also -* [Grid and Tick Lines](./grid-tick/) -* [Labels](./labels/) +* [Grid and Tick Lines](./grid-tick) +* [Labels](./labels) diff --git a/blazor/range-selector/light-weight.md b/blazor/range-selector/light-weight.md index 96c2c27dd6..3cb374d764 100644 --- a/blazor/range-selector/light-weight.md +++ b/blazor/range-selector/light-weight.md @@ -47,4 +47,4 @@ By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusi ## See Also -* [Period Selector](./period-selector/) +* [Period Selector](./period-selector)