Search results

Range in ASP.NET Core Range Navigator control

30 Jul 2021 / 1 minute to read

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and end through value properties.

Following code example shows how to configure the selected range using value property of RangeNavigator.

tagHelper
range.cs
Copied to clipboard
@{
   var value = new object[] { new DateTime(2005,05,01), new DateTime(2010,1,31) };
}
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" value="value" >
                <e-rangenavigator-rangenavigatorseriescollection>
                    <e-rangenavigator-rangenavigatorseries xName="x" yName="y" dataSource="ViewBag.dataSource" type="Area">
                    </e-rangenavigator-rangenavigatorseries>
                </e-rangenavigator-rangenavigatorseriescollection>
  </ejs-rangenavigator>
Copied to clipboard
public IActionResult Index()
        {
           List <data> dataSource = new List<data>
            {
                new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
                new data { x = new DateTime(2006, 01, 01), y = 24, y1 = 44 },
                new data { x = new DateTime(2007, 01, 01), y = 36, y1 = 48 },
                new data { x = new DateTime(2008, 01, 01), y = 38, y1 = 50 },
                new data { x = new DateTime(2009, 01, 01), y = 54, y1 = 66 },
                new data { x = new DateTime(2010, 01, 01), y = 57, y1 = 78 },
                new data { x = new DateTime(2011, 01, 01), y = 70, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public DateTime x;
            public double y;
            public double y1;
        }