Merge pull request #25 from SyncfusionExamples/899676-CustomToolbar

899676-Added Custom Toolbar sample

How to/Create Custom Toolbar/Create Custom Toolbar.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34902.65
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Create Custom Toolbar", "Create Custom Toolbar\Create Custom Toolbar.csproj", "{883742C8-4DE9-479E-A582-FF01DF4081C1}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{883742C8-4DE9-479E-A582-FF01DF4081C1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{883742C8-4DE9-479E-A582-FF01DF4081C1}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{883742C8-4DE9-479E-A582-FF01DF4081C1}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{883742C8-4DE9-479E-A582-FF01DF4081C1}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {E7A8463F-C219-4747-A7CF-2ABC8267316A}
+	EndGlobalSection
+EndGlobal

How to/Create Custom Toolbar/Create Custom Toolbar/Create Custom Toolbar.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>Create_Custom_Toolbar</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+	 <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="26.2.9" />
+  </ItemGroup>
+</Project>

How to/Create Custom Toolbar/Create Custom Toolbar/Create Custom Toolbar.csproj.user

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <ActiveDebugProfile>https</ActiveDebugProfile>
+  </PropertyGroup>
+</Project>

How to/Create Custom Toolbar/Create Custom Toolbar/Pages/Error.cshtml

@@ -0,0 +1,26 @@
+@page
+@model ErrorModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

How to/Create Custom Toolbar/Create Custom Toolbar/Pages/Error.cshtml.cs

@@ -0,0 +1,28 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.Diagnostics;
+
+namespace Create_Custom_Toolbar.Pages
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    [IgnoreAntiforgeryToken]
+    public class ErrorModel : PageModel
+    {
+        public string? RequestId { get; set; }
+
+        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+        private readonly ILogger<ErrorModel> _logger;
+
+        public ErrorModel(ILogger<ErrorModel> logger)
+        {
+            _logger = logger;
+        }
+
+        public void OnGet()
+        {
+            RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+        }
+    }
+
+}

How to/Create Custom Toolbar/Create Custom Toolbar/Pages/Index.cshtml

@@ -0,0 +1,262 @@
+@page "{handler?}"
+@model IndexModel
+@{
+    ViewData["Title"] = "Home page";
+    var template = "<div class=''><span class='e-pv-total-page-number' id='totalPage'>of 0</span></div>";
+    var inputtemplate = "<div class=''><input type='text' class='e-input-group e-pv-current-page-number' id='currentPage' /></div>";
+}
+
+<ejs-toolbar id="topToolbar" height="56px">
+    <e-toolbar-items>
+        <e-toolbar-item prefixIcon="e-pv-open-document-icon" tooltipText="Open" align="Left" click="openPage" id="Openpage"></e-toolbar-item>
+        <e-toolbar-item prefixIcon="e-pv-previous-page-navigation-icon" tooltipText="Previous Page" align="Center" click="previousClicked" id="previousPage"></e-toolbar-item>
+        <e-toolbar-item prefixIcon="e-pv-next-page-navigation-icon" tooltipText="Next Page" align="Center" click="nextClicked" id="nextPage"></e-toolbar-item>
+        <e-toolbar-item template="@inputtemplate" tooltipText="Page Number" type="Input" align="Center"></e-toolbar-item>
+        <e-toolbar-item template="@template" align="Center" tooltipText="Page Number"></e-toolbar-item>
+        <e-toolbar-item prefixIcon="e-pv-print-document-icon" tooltipText="Print" align="Right" click="printClicked"></e-toolbar-item>
+        <e-toolbar-item prefixIcon="e-pv-download-document-icon" tooltipText="Download" align="Right" click="downloadClicked"></e-toolbar-item>
+    </e-toolbar-items>
+</ejs-toolbar>
+<ejs-pdfviewer id="pdfviewer" style="height:641px" enableToolbar="false" enableNavigationToolbar="false" documentLoad="documentLoaded" pageChange="pageChanged"></ejs-pdfviewer>
+<input type="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;">
+
+<div id="magnificationToolbarItems">
+    <ejs-toolbar id="magnificationToolbar">
+        <e-toolbar-items id="magnificationToolbarItems">
+            <e-toolbar-item prefixIcon="e-pv-fit-page" tooltipText="Fit to page" click="pageFitClicked"></e-toolbar-item>
+            <e-toolbar-item prefixIcon="e-pv-zoom-in-icon" tooltipText="Zoom in" click="zoomInClicked"></e-toolbar-item>
+            <e-toolbar-item prefixIcon="e-pv-zoom-out-icon" tooltipText="Zoom out" click="zoomOutClicked"></e-toolbar-item>
+        </e-toolbar-items>
+    </ejs-toolbar>
+</div>
+<script type="text/javascript">
+    var currentPageBox
+    var matchCase = false;
+    var filename;
+    window.onload = function () {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        setTimeout(()=>{
+            pdfViewer.load("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf", null);
+            currentPageBox = document.getElementById('currentPage');
+            currentPageBox.value = '1';
+            document.getElementById('fileUpload').addEventListener('change', readFile, false);
+            currentPageBox.addEventListener('keypress', () => {
+                var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+                var currentPage = document.getElementById('currentPage');
+                if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+                    event.preventDefault();
+                    return false;
+                } else {
+                    var currentPageNumber = parseInt((currentPage).value);
+                    if (event.which === 13) {
+                        if (currentPageNumber > 0 && currentPageNumber <= pdfViewer.pageCount) {
+                            pdfViewer.navigation.goToPage(currentPageNumber);
+                        } else {
+                            (currentPage).value = pdfViewer.currentPageNumber.toString();
+                        }
+                    }
+                    return true;
+                }
+             });
+        }, 2000)
+    }
+    function openPage() {
+        document.getElementById('fileUpload').click();
+    }
+    function readFile(evt) {
+        var upoadedFiles = evt.target.files;
+        var uploadedFile = upoadedFiles[0];
+        filename = upoadedFiles[0].name;
+        var reader = new FileReader();
+        reader.readAsDataURL(uploadedFile);
+        reader.onload = function () {
+            var obj = document.getElementById('pdfviewer').ej2_instances[0];
+            var uploadedFileUrl = this.result;
+            obj.load(uploadedFileUrl, null);
+            obj.fileName = filename;
+            currentPageBox = document.getElementById('currentPage');
+            currentPageBox.value = '1';
+            var pageCount = document.getElementById('totalPage');
+            pageCount.textContent = 'of ' + obj.pageCount;
+        }
+    }
+    function pageChanged() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        document.getElementById('currentPage').value = pdfViewer.currentPageNumber;
+        updatePageNavigation();
+    }
+    function onCurrentPageBoxKeypress(event) {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        var currentPageBox = document.getElementById('currentPage');
+        if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+            event.preventDefault();
+            return false;
+        }
+        else {
+            var currentPageNumber = parseInt(currentPageBox.value);
+            if (event.which === 13) {
+                if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
+                    pdfViewer.navigation.goToPage(currentPageNumber);
+                }
+                else {
+                    currentPageBox.value = viewer.currentPageNumber.toString();
+                }
+            }
+            return true;
+        }
+    }
+
+    function currentPageClicked() {
+        var currentPage = document.getElementById('currentPage');
+        (currentPage).select();
+    }
+    function documentLoaded() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        var pageCount = document.getElementById('totalPage');
+        pageCount.textContent = 'of ' + pdfViewer.pageCount;
+        updatePageNavigation();
+    }
+    function updatePageNavigation() {
+        var toolbarObj = document.getElementById('topToolbar').ej2_instances[0];
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        if (pdfViewer.currentPageNumber === 1) {
+            toolbarObj.enableItems(document.getElementById('previousPage'), false);
+            toolbarObj.enableItems(document.getElementById('nextPage'), true);
+        } else if (pdfViewer.currentPageNumber === pdfViewer.pageCount) {
+            toolbarObj.enableItems(document.getElementById('previousPage'), true);
+            toolbarObj.enableItems(document.getElementById('nextPage'), false);
+        } else {
+            toolbarObj.enableItems(document.getElementById('previousPage'), true);
+            toolbarObj.enableItems(document.getElementById('nextPage'), true);
+        }
+    }
+    function previousClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.navigation.goToPreviousPage();
+    }
+    function nextClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.navigation.goToNextPage();
+    }
+    function printClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.print.print();
+    }
+    function downloadClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.download();
+    }
+    function pageFitClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.magnification.fitToPage();
+    }
+    function zoomInClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.magnification.zoomIn();
+    }
+    function zoomOutClicked() {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+        pdfViewer.magnification.zoomOut();
+    }
+</script>
+<style>
+    #magnificationToolbar {
+        background: transparent;
+        height: auto;
+        width: 200px;
+        position: absolute;
+        z-index: 1001;
+        left: calc(100% - 120px);
+        top: calc(100% - 110px);
+        transform: rotate(90deg);
+        border-width: 0px;
+    }
+
+    .e-pv-zoom-out-icon {
+        transform: rotate(-90deg);
+    }
+
+    div#magnificationToolbar.e-toolbar .e-toolbar-items {
+        background: transparent;
+    }
+
+    #magnificationToolbar.e-toolbar .e-tbar-btn {
+        border-radius: 50%;
+        min-height: 30px;
+        min-width: 30px;
+    }
+
+    #topToolbar {
+        top: 0px;
+        z-index: 1001;
+    }
+
+    .material .e-pv-current-page-number {
+        border-width: 1px;
+    }
+
+    .e-pv-current-page-number {
+        width: 46px;
+        height: 28px;
+        text-align: center;
+    }
+
+    .e-icons {
+        font-family: "e-icons";
+        font-style: normal;
+        font-variant: normal;
+        font-weight: normal;
+        line-height: 1;
+        text-transform: none;
+    }
+
+    .e-pv-icon::before {
+        font-family: 'e-icons';
+    }
+
+    .e-pv-icon-search::before {
+        font-family: 'e-icons';
+        font-size: 12px;
+    }
+
+    #topToolbar .e-pv-download-document-icon::before {
+        padding-left: 4px;
+        content: '\e914';
+    }
+
+    #topToolbar .e-pv-print-document-icon::before {
+        padding-left: 1px;
+        content: '\e917';
+    }
+
+    .e-pv-previous-page-navigation-icon::before {
+        content: '\e910';
+    }
+
+    .e-pv-next-page-navigation-icon::before {
+        content: '\e911';
+    }
+
+    .e-pv-zoom-out-icon::before {
+        content: '\e912';
+    }
+
+    .e-pv-zoom-in-icon::before {
+        content: '\e91d';
+    }
+
+    .e-pv-fit-page::before {
+        content: '\e91b';
+    }
+
+    .e-pv-open-document-icon::before {
+        content: '\e91c';
+    }
+
+    @@font-face {
+        font-family: "e-icons";
+        font-style: normal;
+        font-weight: normal;
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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ZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
+    }
+</style>

How to/Create Custom Toolbar/Create Custom Toolbar/Pages/Index.cshtml.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Create_Custom_Toolbar.Pages
+{
+    public class IndexModel : PageModel
+    {
+        private readonly ILogger<IndexModel> _logger;
+
+        public IndexModel(ILogger<IndexModel> logger)
+        {
+            _logger = logger;
+        }
+
+        public void OnGet()
+        {
+
+        }
+    }
+}

How to/Create Custom Toolbar/Create Custom Toolbar/Pages/Privacy.cshtml

@@ -0,0 +1,8 @@
+@page
+@model PrivacyModel
+@{
+    ViewData["Title"] = "Privacy Policy";
+}
+<h1>@ViewData["Title"]</h1>
+
+<p>Use this page to detail your site's privacy policy.</p>