Toolbar Scroll Issue

[Nagendra Gupta]

Dear Team,

I have a requirement and this requirement you will better understand after the attached file seen. So, Please seen the attached file first.

Requirement:-

I have 22 pages which open by Toolbar items as well as next arrow icon click. Which is below whom you must have seen in the video. When we click next arrow the selection of toolbar items selected according to page but after 14 next the selection of item not visible in front. When I scroll toolbar item is looking selected. But I want without scroll selected item of toolbar show in front of screen.

Attachment: Google_Chrome_20220922_131830_5349b3c7.zip

[Ruksar Moosa Sait]

Hi Nagendra,

We have checked on your requirement and suggest you query the respective toolbar item and set focus to it when you click on the Previous or Next button. For Instance, here we have set the focus to the respective toolbar item(a button element) on the Next and Previous click. 

Sample: https://stackblitz.com/edit/ej2-ts-toolbar-set-focus-to-toolbar-items?file=index.ts

[index.ts]

let toolbarItem = document.querySelectorAll('.e-toolbar-item');

let itemIndex = 0;

 

nextbutton.element.onclick = (): void => {

    itemIndex += itemIndex > 39 ? 0 : 1;

    (toolbarItem[itemIndex].firstChild as HTMLElement).focus();

}

prevbutton.element.onclick = (): void => {

    itemIndex -= itemIndex < 1 ? 0 : 1;

    (toolbarItem[itemIndex].firstChild as HTMLElement).focus();

}

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ruksar Moosa Sait

[Nagendra Gupta]

Hi Ruksar Moosa Sait ,

Thanks for your reply.

It is possible to create this example with template like <e-items>< <e-item>First</e-item>  <e-item>Second</e-item> </e-items>

Regards

Nagendra Gupta

[Ruksar Moosa Sait]

Hi Nagendra,

We have prepared a sample using the Toolbar <e-item> like the below code.

Sample: https://stackblitz.com/edit/ej2-angular-toolbar-scroll-items-dynamically?file=app.component.html

[app.component.html]

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

[app.component.ts]

public toolbarItem: any;

public itemIndex: number = 0;

public created(): void {

        this.toolbarItem = document.querySelectorAll('.e-toolbar-item');

    }
nextClick() {        

        this.itemIndex += this.itemIndex > 39 ? 0 : 1;

        (this.toolbarItem[this.itemIndex].firstChild as HTMLElement).focus();

    }

  prevClick(){

        this.itemIndex -= this.itemIndex < 1 ? 0 : 1;

        (this.toolbarItem[this.itemIndex].firstChild as HTMLElement).focus();

    }

Kindly try the shared sample and if the shared solution does not meet your requirement kindly share the Toolbar-related code snippet it will help us to provide the solution for your query earlier.

Regards,

Ruksar Moosa Sait

[Nagendra Gupta]

Hi Ruksar Moosa Sait ,

Thanks for your reply.

It is possible to create this example with template like below code

<div id="popup-tab" class="dashboard-tab">

    <ejs-toolbar #sfToolbar scrollStep="50">

        <e-items>

            <e-item *ngFor="let tab of tabData;let rowTabIndex=index">

                <ng-template #template>

                    <div class="new-tab">

                        <div class="tab-panel-control">

                            <ul class="nav nav-pills flex-wrap" role="tablist">

                                <li class="nav-item">

                                    <a rel='nofollow' href="javascript:void(0)" class="nav-link" data-toggle="pill"

                                        [ngClass]="{'active':tabIndex==rowTabIndex}"

                                        (click)="switchTab(tab, rowTabIndex)">

                                        {{tab.TAB_NAME}}

                                    </a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </ng-template>

            </e-item>

        </e-items>

    </ejs-toolbar>

  <button ejs-button (click)="prevClick()">PREVIOUS</button>

        <button ejs-button (click)="nextClick()">NEXT</button>

</div>

[Ruksar Moosa Sait]

Hi Nagendra,

We have checked on your shared codes and have prepared a sample to focus the anchor element like the below code. Kindly try the sample and let us know if this meets your requirement.

nextClick() {

    this.itemIndex += this.itemIndex > 37 ? 0 : 1;

    (this.toolbarItem[this.itemIndex].querySelector('.nav-link') as HTMLElement).focus();

  }

  prevClick() {

    this.itemIndex -= this.itemIndex < 1 ? 0 : 1;

    (this.toolbarItem[this.itemIndex].querySelector('.nav-link') as HTMLElement).focus();

  }

Sample: https://stackblitz.com/edit/ej2-angular-toolbar-scroll-items-dynamically-bosyxj?file=app.component.html,app.component.ts

Regards,

Ruksar Moosa Sait