Skip to content

Commit 052840a

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #4266 from Syncfusion-Content/hotfix/hotfix-v29.2.4
DOCINFRA-2341_merged_using_automation
2 parents f56a3b0 + 866cc81 commit 052840a

File tree

2 files changed

+79
-104
lines changed

2 files changed

+79
-104
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/toolbar.md‎

Lines changed: 40 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,15 @@ PDF Viewer allows you to customize(add, show, hide, enable, and disable) existin
117117
{% tabs %}
118118
{% highlight html tabtitle="Standalone" %}
119119

120+
@using Syncfusion.EJ2
121+
@{
122+
ViewBag.Title = "Home Page";
123+
}
124+
120125
<div>
121126
<div style="height:500px;width:1350px;">
122127
<br /><br />
123-
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render()
128+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render()
124129
</div>
125130
</div>
126131

@@ -180,65 +185,51 @@ PDF Viewer allows you to customize(add, show, hide, enable, and disable) existin
180185
{% endhighlight %}
181186
{% highlight html tabtitle="Server-Backed" %}
182187

188+
@{
189+
ViewBag.Title = "Home Page";
190+
}
191+
@using Syncfusion.EJ2.PdfViewer
192+
@using ToolbarCustomization.Controllers
193+
@{
194+
var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" };
195+
CustomToolbarItems customToolbarItems = new CustomToolbarItems();
196+
customToolbarItems.ToolbarItems = new List<object> { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" };
197+
PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings()
198+
{
199+
ShowTooltip = true,
200+
ToolbarItems = customToolbarItems.ToolbarItems
201+
};
202+
}
183203
<div>
184204
<div style="height:500px;width:1350px;">
185205
<br /><br />
186-
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render()
206+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ToolbarClick("toolbarClick").Created("onLoadedPage").DocumentLoad("documentLoaded").FormFieldAdd("formFieldAdd").ToolbarSettings(toolbarSettings).Render()
187207
</div>
188208
</div>
189209

190210
<script type="text/javascript">
191-
window.onload = function () {
192-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
193-
var toolItem1 = {
194-
prefixIcon: 'e-icons e-paste',
195-
id: 'print',
196-
tooltipText: 'Custom toolbar item',
197-
align: 'left'
198-
};
199-
var toolItem2 = {
200-
id: 'download',
201-
text: 'Save',
202-
tooltipText: 'Custom toolbar item',
203-
align: 'right'
204-
};
205-
var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
206-
var toolItem3 = {
207-
type: 'Input',
208-
tooltipText: 'Language List',
209-
cssClass: 'percentage',
210-
align: 'Left',
211-
id: 'dropdown',
212-
template: new ej.dropdowns.ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
213-
};
214-
var toolItem4 = {
215-
type: 'Input',
216-
tooltipText: 'Text',
217-
align: 'Right',
218-
cssClass: 'find',
219-
id: 'textbox',
220-
template: new ej.inputs.TextBox({ width: 125, placeholder: 'Type Here', created: onCreate })
221-
}; align: 'left'
222-
function onCreate() {
223-
this.addIcon('prepend', 'e-icons e-search');
224-
}
225-
pdfViewer.toolbarSettings = {
226-
showTooltip: true,
227-
toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']
228-
};
229-
230-
};
231-
232-
// Define the toolbarClick event handler
211+
function onLoadedPage(args) {
212+
console.log(args);
213+
}
214+
function documentLoaded(args) {
215+
console.log(args);
216+
}
217+
function formFieldAdd(args) {
218+
console.log(args);
219+
}
233220
function toolbarClick(args) {
234-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
235-
if (args.item && args.item.id === 'print') {
236-
pdfViewer.printModule.print();
237-
} else if (args.item && args.item.id === 'download') {
238-
pdfViewer.download();
221+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
222+
if (args.item && args.item.id === 'submit_form') {
223+
alert('Custom button clicked!');
239224
}
240225
}
241226
</script>
227+
228+
<style>
229+
.custom_button {
230+
height: 100% !important;
231+
}
232+
</style>
242233
{% endhighlight %}
243234
{% endtabs %}
244235

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/toolbar.md‎

Lines changed: 39 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -190,11 +190,17 @@ PDF Viewer allows you to customize(add, show, hide, enable, and disable) existin
190190
{% tabs %}
191191
{% highlight html tabtitle="Standalone" %}
192192

193+
@page "{handler?}"
194+
@model IndexModel
195+
@{
196+
ViewData["Title"] = "Home page";
197+
}
198+
193199
<div>
194200
<ejs-pdfviewer id="pdfviewer"
195201
style="width:1350px;height:100%"
196202
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
197-
resourceUrl='https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib'
203+
resourceUrl='https://cdn.syncfusion.com/ej2/29.1.35/dist/ej2-pdfviewer-lib'
198204
toolbarClick="toolbarClick">
199205
</ejs-pdfviewer>
200206
</div>
@@ -256,68 +262,46 @@ PDF Viewer allows you to customize(add, show, hide, enable, and disable) existin
256262
{% endhighlight %}
257263
{% highlight html tabtitle="Server-Backed" %}
258264

265+
@page "{handler?}"
266+
@model IndexModel
267+
@using Syncfusion.EJ2.PdfViewer
268+
@using Newtonsoft.Json
269+
@{
270+
ViewData["Title"] = "Home page";
271+
CustomToolbarItems customToolbarItems = new CustomToolbarItems();
272+
var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" };
273+
customToolbarItems.ToolbarItems = new List<object> { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" };
274+
PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings()
275+
{
276+
ShowTooltip = true,
277+
ToolbarItems = customToolbarItems.ToolbarItems
278+
};
279+
}
280+
259281
<div>
260-
<ejs-pdfviewer id="pdfviewer"
261-
style="width:1350px;height:100%"
262-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
263-
serviceUrl="/api/PdfViewer"
264-
toolbarClick="toolbarClick">
282+
<ejs-pdfviewer id="pdfviewer" style="height:600px"
283+
serviceUrl="/Index"
284+
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
285+
toolbarClick="toolbarClick"
286+
ToolbarSettings="toolbarSettings">
265287
</ejs-pdfviewer>
266288
</div>
267289

268-
<script type="text/javascript">
269-
window.onload = function () {
270-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
271-
var toolItem1 = {
272-
prefixIcon: 'e-icons e-paste',
273-
id: 'print',
274-
tooltipText: 'Custom toolbar item',
275-
align: 'left'
276-
};
277-
var toolItem2 = {
278-
id: 'download',
279-
text: 'Save',
280-
tooltipText: 'Custom toolbar item',
281-
align: 'right'
282-
};
283-
var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
284-
var toolItem3 = {
285-
type: 'Input',
286-
tooltipText: 'Language List',
287-
cssClass: 'percentage',
288-
align: 'Left',
289-
id: 'dropdown',
290-
template: new ej.dropdowns.ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
291-
};
292-
var toolItem4 = {
293-
type: 'Input',
294-
tooltipText: 'Text',
295-
align: 'Right',
296-
cssClass: 'find',
297-
id: 'textbox',
298-
template: new ej.inputs.TextBox({ width: 125, placeholder: 'Type Here', created: onCreate })
299-
};
300-
pdfViewer.toolbarSettings = {
301-
showTooltip: true,
302-
toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']
303-
};
304-
function onCreate() {
305-
this.addIcon('prepend', 'e-icons e-search');
306-
}
307-
}
308-
309-
// Define the toolbarClick event handler
290+
<script>
310291
function toolbarClick(args) {
311-
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
292+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
293+
if (args.item && args.item.id === 'submit_form') {
294+
alert('Custom button clicked!');
295+
}
296+
}
297+
</script>
312298

313-
if (args.item && args.item.id === 'print') {
314-
pdfViewer.printModule.print();
315-
} else if (args.item && args.item.id === 'download') {
316-
pdfViewer.download();
317-
}
299+
<style>
300+
.custom_button {
301+
height: 100% !important;
318302
}
303+
</style>
319304

320-
</script>
321305

322306
{% endhighlight %}
323307
{% endtabs %}

0 commit comments

Comments
 (0)