ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Grid Lines and Tick Lines in ASP.NET Core Range Navigator control

Grid line customization

You can customize the width, color, and dashArray of the major grid lines using the majorGridLines property.

tagHelper
grid.cs
@{
   var value = new object[]{20, 50 };
}
 <ejs-rangenavigator id="rangeNavigator" valueType="Double" value="value" >
                <e-rangenavigator-majorgridlines color="blue" width=4 dashArray="5,5">
                  </e-rangenavigator-majorgridlines>
                <e-rangenavigator-rangenavigatorseriescollection>
                    <e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
                    </e-rangenavigator-rangenavigatorseries>
                </e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
public IActionResult Index()
        {
            List < data>dataSource = new List<data>
            {
                new data {  y = 12, y1 = 28 },
                new data {  y = 34, y1 = 44 },
                new data {  y = 45, y1 = 48 },
                new data {  y = 56, y1 = 50 },
                new data {  y = 67, y1 = 66 },
                new data {  y = 78, y1 = 78 },
                new data {  y = 89, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public double y;
            public double y1;
        }

Tick line customization

You can customize the width, color, and height of the major tick lines using the majorTickLines property.

tagHelper
tick.cs
@{
   var value = new object[]{20, 50 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Double" value="value" >
                <e-rangenavigator-majorticklines color="blue" width=4 >
                  </e-rangenavigator-majorticklines>
                <e-rangenavigator-rangenavigatorseriescollection>
                    <e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
                    </e-rangenavigator-rangenavigatorseries>
                </e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
public IActionResult Index()
        {
            List < data>dataSource = new List<data>
            {
                new data {  y = 12, y1 = 28 },
                new data {  y = 34, y1 = 44 },
                new data {  y = 45, y1 = 48 },
                new data {  y = 56, y1 = 50 },
                new data {  y = 67, y1 = 66 },
                new data {  y = 78, y1 = 78 },
                new data {  y = 89, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public double y;
            public double y1;
        }
Previous
Next