Toolbar/Responsive Mode Component Question for React EJ2

[Diego Santana]

Hello, 

We are using the Toolbar component for displaying a list of custom Elements horizontally with overflow mode "Scrollable"

https://ej2.syncfusion.com/15.4.23/angular/documentation/toolbar/responsive-mode.html

Had a question regarding the left and right navigation, Is there anyway to configure this left and right arrows to decide how much it should scroll.
We are aware of keep the arrow pressed to continuously roll.

Our use case is,
We have 10 custom items to be displayed in this toolbar where at once you can only see 5 items. 
So, when the component renders, it will display items 1-5 and items 6-10 will be hidden

now, when an end user clicks on right arrow we want to scroll to right the entire component width and display 6-10 items and hide 1-5 items. 
So, basically like having the right and left arrows behave as previous and next. 
 
Is this doable? 

[Buvana Sathasivam]

Hi Diego,   

  

Thanks for using Syncfusion Products.   

  

Yes.  You can decide on how much toolbar should scroll with left/right arrows.  By default, 50 scroll steps are assigned to our toolbar component.  If you wish to change this, you can override the scrollStep to some other value as per your convenience using a toolbar created event.  Now, you click left/right scrolling arrow, then 300 distances are scrolled.  Please find the below code.   

  

app/app.component.ts   

  

@Component({   

        selector: 'app-container',   

        template: `   

        <ejs-toolbar (created)="created($event)">   

          <e-items>   

              …………   

          </e-items>   

        </ejs-toolbar>   

        `   

    })   

export class AppComponent {   

    @ViewChild('element') element;   

        public created () {   // Triggered when control is rendered   

            let hscrllEle: HTMLElement = document.querySelector('.e-hscroll'); // Get hscroll   

            hscrllEle.ej2_instances[0].scrollStep = 300;  // Here, you can specify scrollStep distance   

        }   

    }   

           

For your better convenience, we have prepared a plunker.  Please find the below link.   

  

Plunker Link: https://plnkr.co/edit/1WqNwcW2DyyUdLMsQCbb?p=preview     

  

API link: https://ej2.syncfusion.com/16.1.24/documentation/toolbar/api-toolbar.html?lang=typescript#created   

  

Regards,   

Buvana S   

   

 

[Diego Santana]

Hey, Thank you for responding back. 

Would it be possible for you to provide an example in React? 

[Buvana Sathasivam]

Hi Diego, 

Thanks for your update. 

We have created toolbar sample using React framework.  Now, you can change the toolbar scrollStep property using created event.  Please find the below code. 

app/index.tsx 

export class Default extends SampleBase<{}, {}> 

        { 

        public created(e: CreatedEventArgs): void { // Triggered when toolbar component created 

        let hscrllEle: HTMLElement = document.querySelector('.e-hscroll'); 

        hscrllEle.ej2_instances[0].scrollStep = 300;  // Specify scrollStep distance 

        } 

 

        render () { 

        return (                {/* Render the Toolbar Component */} 

                <toolbarcomponent created={this.created.bind(this)}> // Created event 

                    <itemsdirective> 

                     …………. 

                    </itemsdirective> 

                </toolbarcomponent>   

    ); 

    } 

}   

 

  

Please find the below plunker sample link. 

https://plnkr.co/edit/PB9pqwiOK46JuH8tRUQi?p=preview  

Regards, 

Buvana S 

 

[Diego Santana]

Hello, 

Thank you for your prompt reply.
I have two follow-up questions, so based on your help we were able to modify the scrollStep value.

1) Is it possible to have an animation to scroll so that end user can see the scrolling done when clicked on the right or left navigation buttons?

2) Would it be possible so that we don't have to click and drag. We have a click event on our custom elements which makes other updates.
So, the use case for us would be if we can just scroll horizontally just by mouse scroll when we hover over this element? 

[Arun Palaniyandi]

Hi Diego,    

   

Sorry for the inconvenience.   

  

We found that the requested requirement of “scrolling with custom element hover”, “stopping click drag” and “animation effects are not feasible” with current implementation of toolbar.    

   

Let us know if you have any further queries.    

   

Regards,   

Arun P.