User Interactions

7 Dec 20179 minutes to read

Highlight

EjRangeNavigator provides highlighting supports to the intervals on mouse hover. To enable the highlighting option, set the enable property to true in the highlightSettings of navigatorStyleSettings.

  • javascript
  • /// <reference path="../tsfiles/jquery.d.ts"></reference>
    /// <reference path="../tsfiles/ej.web.all.d.ts"></reference>
    
    module RangeComponent {
    
     $(function () {
    
        var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), { 
         
             //...   
             navigatorStyleSettings:{
                    //...        
                  highlightSettings:{
                       // enable the highlight settings
                       enable: true                                
                  }    
                  //...
              }
              // ...             
         });
    
     });
    }

    Click here to view the highlight and selections online demo sample.

    Customize the highlight style

    To customize the highlighted intervals, use color, border and opacity options in the highlightSettings.

  • javascript
  • var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), { 
         
             //...   
             navigatorStyleSettings:{
                    //...        
                    highlightSettings:{
                        // enable the highlight settings
                        enable: true,         
                        // customizing style
                        color: '#006fa0',       
                        border:{
                            color: 'red' , width: 2
                          }        
                  }
                  //...
             }
             // ...             
         });

    Selection

    EjRangeNavigator provides selection supports to the intervals by, clicking and dragging the highlighted intervals. To enable the selection option, set the enable property to true in the selectionSettings.

  • javascript
  • var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), {
         
             //...   
             navigatorStyleSettings:{
                    //...        
                  selectionSettings:{
                       // enable the selection settings
                       enable: true                                
                  }    
                  //...
              }
              // ...             
         });

    Click here to view the highlight and selections online demo sample.

    Customize the selection style

    To customize the selected intervals, use color, border and opacity options in the selectionSettings.

  • javascript
  • var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), { 
         
             //...   
             navigatorStyleSettings:{
                    //...        
                    selectionSettings: {
                        // enable the selection settings
                        enable: true,         
                        // customizing style
                        color: '#27e8e5',       
                        border:{
                             color: 'red' , width: 2
                           }
                      //...
                  }
             // ...             
         });

    Scrollbar

    • To render the Scrollbar in RangeNavigator, you need to enable enableScrollbar option.

    • scrollRangeSettings of range navigator start and end value is used to set the minimum and maximum datasource value to be added in the range navigator.

    • Based on the scrollRangeSettings start, end value and dataSource start, end value scrollbar will be adjust.

    • When you change the scrollbar position, scrollEnd event returns the current position of start and end range value.

  • javascript
  • var sample = new ej.datavisualization.RangeNavigator($("#RangeNavigator"), {
              
             //...
             //Enable scrollbar option in the range navigator
              enableScrollbar: true,
             //Maximum data to be displayed in the range navigator control
             scrollRangeSettings: {
                   start: new Date(2010, 0, 1),
                   end: new Date(2011, 10, 31)
               },
               
             //Subscribe the event on scrollbar position changed           
             scrollEnd: "onScrollbarChange"
             
             //...
         });
    
          function onScrollbarChange(sender) {
                var start  = sender.data.newRange.start;
                var end  = sender.data.newRange.end;
          }

    Click here to view scrollbar online demo sample.