This section briefly explains about how to include a RangeNavigator
in your Blazor server-side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.
HEAD
element of the ~/Pages/_Host.cshtml
page.<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>
Note: The same theme file can be referred through the CDN version by using https://cdn.syncfusion.com/blazor/18.1.36-beta/styles/bootstrap4.css
For Internet Explorer 11 kindly refer the polyfills. Refer the
documentation
for more information.
<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>
Open **~/_Imports.razor
file and import the Syncfusion.Blazor.**
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
Open the Startup.cs file and add services required by Syncfusion components using service.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
Note: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true)
and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.
<head>
<script src="https://cdn.syncfusion.com/blazor/18.1.36-beta/dist/syncfusion-blazor.min.js"></script>
</head>
Now, add the Syncfusion Blazor components in any web page (razor) in the Pages folder. For example, the Range navigator
component is added in the ~/Pages/Index.razor page.
Note: For smooth user interaction with chart, please load the lodash script,
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
</head>
in the HEAD element of the ~/Pages/_Host.cshtml page for server side blazor application, in the HEAD element of the ~/wwwroot/index.html for wasm application.
<SfRangeNavigator></SfRangeNavigator>
To bind data for the Range Navigator component, you can assign a IEnumerable object to
the DataSource
property. The list can also be provided as an instance of the DataManager.
public class StockPrice
{
public DateTime Date { get; set;}
public double Close { get; set; }
}
public List<StockPrice> StockDetails = new List<StockPrice>
{
new StockPrice { Date = new DateTime(2005, 01, 01), Close = 21 },
new StockPrice { Date = new DateTime(2006, 01, 01), Close = 24 },
new StockPrice { Date = new DateTime(2007, 01, 01), Close = 36 },
new StockPrice { Date = new DateTime(2008, 01, 01), Close = 38 },
new StockPrice { Date = new DateTime(2009, 01, 01), Close = 54 },
new StockPrice { Date = new DateTime(2010, 01, 01), Close = 57 },
new StockPrice { Date = new DateTime(2011, 01, 01), Close = 62 }
};
Now map the field names Date
and Close
in the data to the XName
and YName
properties of the range navigator series, then set the StockDetails to DataSource
property.
<SfRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" IntervalType="RangeIntervalType.Years" LabelFormat="yyyy">
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
After successful compilation of your application, the Syncfusion Blazor Range Navigator component will render in the web browser.