Angular
Demos
Support
Forum
Download
Search results

How to customize toolbar scrollStep

Toolbar supports to customize the scrolling distance when you click the left and right side navigation icons. Through beforeCreate event we can customize scrollStep property for scrolling distance. Please Refer below steps

  • By using Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.
    public beforeCreate(e: BeforeCreateArgs): void {
        e.scrollStep = 50;
    }
  • Now customize the scrollStep value in Toolbar beforeCreate event handler.
Source
Preview
app.component.html
app.component.ts
index.css
index.html
<div class="control-section e-tbar-section">
    <div class="e-sample-resize-container">
        <!-- Render the Toolbar Component -->
        <ejs-toolbar id="toolbar" (beforeCreate)='beforeCreate($event)'>
            <e-items>
                <e-item prefixIcon='e-cut-icon' tooltipText='Cut'></e-item>
                <e-item prefixIcon='e-copy-icon' tooltipText='Copy'></e-item>
                <e-item prefixIcon='e-paste-icon' tooltipText='Paste'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bold-icon' tooltipText='Bold'></e-item>
                <e-item prefixIcon='e-underline-icon' tooltipText='Underline'></e-item>
                <e-item prefixIcon='e-italic-icon' tooltipText='Italic'></e-item>
                <e-item prefixIcon='e-color-icon' tooltipText='Color-Picker'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-alignleft-icon' tooltipText='Align-Left'></e-item>
                <e-item prefixIcon='e-alignright-icon' tooltipText='Align-Right'></e-item>
                <e-item prefixIcon='e-aligncenter-icon' tooltipText='Align-Center'></e-item>
                <e-item prefixIcon='e-alignjustify-icon' tooltipText='Align-Justify'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bullets-icon' tooltipText='Bullets'></e-item>
                <e-item prefixIcon='e-numbering-icon' tooltipText='Numbering'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-ascending-icon' tooltipText='Ascending'></e-item>
                <e-item prefixIcon='e-descending-icon' tooltipText='Descending'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-upload-icon' tooltipText='Upload'></e-item>
                <e-item prefixIcon='e-download-icon' tooltipText='Download'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-indent-icon' tooltipText='Indent'></e-item>
                <e-item prefixIcon='e-outdent-icon' tooltipText='Outdent'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-clear-icon' tooltipText='Clear'></e-item>
                <e-item prefixIcon='e-reload-icon' tooltipText='Reload'></e-item>
                <e-item prefixIcon='e-export-icon' tooltipText='Export'></e-item>
            </e-items>
        </ejs-toolbar>
        <br/>
    </div>
</div>
import { Component, ViewEncapsulation, Inject } from '@angular/core';
import { ToolbarComponent, BeforeCreateArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-container',
    templateUrl: 'app/app.component.html',
    encapsulation: ViewEncapsulation.None
})
export class DefaultToolbarComponent {

    public beforeCreate(e: BeforeCreateArgs): void {
        e.scrollStep = 50;
    }
}
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.e-tbar-btn .e-icons {
    font-family: 'Material_toolbar';
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

@media only screen and (min-width: 1224px) {
    .e-tbar-section .e-sample-resize-container {
        width: 700px;
    }
}

@media only screen and (min-width: 1824px) {
    .e-tbar-section .e-sample-resize-container {
        width: 50%;
    }
}

.e-tbar-section .e-sample-resize-container {
    margin: auto;
    height: 40px;
    max-width: 700px;
}

.material .e-bigger .e-toolbar .e-tbar-btn .e-icons {
    font-size: 18px;
}

.material .e-toolbar .e-tbar-btn .e-icons {
    font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-container>
        <div id='loader'>LOADING....</div>
    </app-container>
</body>
</html>
Previous
Next