Rank 3
Iron
Iron
Iron
Hey guys,
currently I'm using the pdf viewer with jquery initializing. In my case I have a custom configured toolbar setup with custom messages (because the german culture file doesn't translate the pdf viewer at all).
My viewer is looking like that (I have marked the lines which I've no idea how to implement these in tag helper syntax):
$('#pdfViewer').kendoPDFViewer({
messages: {
toolbar: {
download: 'Herunterladen',
pager: {
first: 'Zur ersten Seite',
last: 'Zur letzten Seite',
next: 'Zur nächsten Seite',
previous: 'Zur vorherigen Seite'
},
togglePan: 'Schwenkmodus',
toggleSelection: 'Markierungsmodus',
zoom: {
zoomIn: 'Hineinzoomen',
zoomOut: 'Herauszoomen'
}
}
},
pdfjsProcessing: {
file: {
data: @Model
}
},
toolbar: {
items: [
{ type: 'pager', input: false, previousNext: true },
{ type: 'zoom', zoomInOut: true },
'toggleSelection',
// 'search',
'download',
// 'print'
]
}
}).data('kendoPDFViewer');Now I'm trying to implement the widget via tag helper syntax but I've no idea how to configure my custom toolbar setup. Any ideas or is it even possible with tag helper?
<kendo-pdfviewer name="pdfViewer">
<messages>
<toolbar download="Herunterladen">
<pager first="Zur ersten Seite"
last="Zur letzten Seite"
next="Zur nächsten Seite"
previous="Zur vorherigen Seite"/>
</toolbar>
</messages>
<pdfjs-processing file="@Model"/>
<toolbar>
<pdfviewer-toolbar-items>
...
</pdfviewer-toolbar-items>
</toolbar>
</kendo-pdfviewer>Regards,
Daniel
1 Answer, 1 is accepted
Hello Daniel,
To define the items that would be rendered in the PDFViewer Toolbar add pdfviewer-toolbar-item tags with the appropriate configuration, for example:
<script>
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
function customCommand(){
var pdfViewer = $("#pdfViewer").getKendoPDFViewer();
pdfViewer.execute({command:"DownloadCommand"});
}
</script>
<kendo-pdfviewer name="pdfViewer">
<messages>
<toolbar download="Herunterladen" togglepan="toggle">
<pager first="Zur ersten Seite"
last="Zur letzten Seite"
next="Zur nächsten Seite"
previous="Zur vorherigen Seite"/>
</toolbar>
</messages>
<toolbar>
<pdfviewer-toolbar-items>
<pdfviewer-toolbar-item command="PageChangeCommand" type="pager" name="pager" ></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item name="zoom"></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item name="toggleSelection"></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item name="download"></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item command="DownloadCommand" type="button" name="download" icon="download"></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item name="open"></pdfviewer-toolbar-item>
<pdfviewer-toolbar-item template="<button class='k-button k-button-solid k-button-solid-primary' onclick='customCommand()'>Download Me!</button>"></pdfviewer-toolbar-item>
</pdfviewer-toolbar-items>
</toolbar>
</kendo-pdfviewer>
You can pass the name of the of the tool you would like to add, to add the default configuration or use the extended configuration as highlighted in yellow above, to set additional configuration options. I have also added an example of how you can use a template to add a custom button. However, for the option to fully customize the command by providing the configuration options you will have to use jQuery initialization.
As for the messages - the highlighted options are currently not exposed in the jQuery API and are thus not configurable via the HTML Helpers or TagHelpers and their configuration options. I have increased the priority of the relevant issue, following this report. You can still change the localization when using any of the helpers, though you will need to add the localization file with the desired messages prior to initializing the PDFViewer:
if (kendo.ui.PDFViewer) {
kendo.ui.PDFViewer.prototype.options.messages =
$.extend(true, kendo.ui.PDFViewer.prototype.options.messages, {
defaultFileName: "My test Document",
toolbar: {
zoom: {
zoomOut: "Zoom Out test",
zoomIn: "Zoom In test",
actualWidth: "test Actual Width",
autoWidth: "test Automatic Width",
fitToWidth: "test Fit to Width",
fitToPage: "test Fit to Page"
},
open: "Open test",
exportAs: "Export test",
download: "Download test",
pager: {
first: "Go to the first page test",
previous: "Go to the previous page test",
next: "Go to the next page test",
last: "Go to the last page test",
of: " of test {0} ",
page: "page test",
pages: "localized test pages"
},
print: "Print test",
toggleSelection: "Enable Selection test",
togglePan: "Enable Panning test",
search: "Search test"
},
errorMessages: {
notSupported: "Only pdf files allowed test.",
parseError: "PDF file fails to process test.",
notFound: "File is not found test.",
popupBlocked: "Popup is blocked test."
},
dialogs: {
exportAsDialog: {
title: "Export... test",
defaultFileName: "Documen test",
pdf: "Portable Document Format (.pdf) test",
png: "Portable Network Graphics (.png) test",
svg: "Scalable Vector Graphics (.svg) test",
labels: {
fileName: "File name test",
saveAsType: "Save as test",
page: "Page test"
}
},
okText: "OK test",
save: "Save test",
cancel: "Cancel test",
search: {
inputLabel: "Search Text test",
matchCase: "Match Case test",
next: "Next Match test",
previous: "Previous Match test",
close: "Close test",
of: "of test"
}
}
});
}Here is a sample REPL demonstrating this.
I hope this helps.
Regards,
Aleksandar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 3
Iron
Iron
Iron
Thanks for the information. Well, than I will keep using the jQuery initializing to enable my custom toolbar of the widget.
But thank you for the provided messages json for the whole pdf viewer. I've translated it already into german by comparing the german versions of ms word and other tools so that the translations are common for german users and in high quality. I don't know exactely how I can contribute the german translation in order to extend the global localization files of kendo, so I post the translated json in here. Maybe you or somebody else can provide the translation into the localization file, feel free:
if (kendo.ui.PDFViewer) {
kendo.ui.PDFViewer.prototype.options.messages =
$.extend(true, kendo.ui.PDFViewer.prototype.options.messages, {
defaultFileName: 'Mein Dokument',
toolbar: {
zoom: {
zoomOut: 'Herauszoomen',
zoomIn: 'Hineinzoomen',
actualWidth: 'Tatsächliche Breite',
autoWidth: 'Automatische Breite',
fitToWidth: 'An Breite anpassen',
fitToPage: 'An Seite anpassen'
},
open: 'Öffnen',
exportAs: 'Exportieren',
download: 'Herunterladen',
pager: {
first: 'Zur ersten Seite',
previous: 'Zur vorherigen Seite',
next: 'Zur nächsten Seite',
last: 'Zur letzten Seite',
of: ' von {0} ',
page: 'Seite',
pages: 'Seiten'
},
print: 'Drucken',
toggleSelection: 'Markierungsmodus',
togglePan: 'Schwenkmodus',
search: 'Suchen'
},
errorMessages: {
notSupported: 'Dateityp nicht unterstützt.',
parseError: 'Fehler beim Verarbeiten der Datei.',
notFound: 'Datei konnte nicht gefunden werden.',
popupBlocked: 'Popups sind blockiert.'
},
dialogs: {
exportAsDialog: {
title: 'Exportieren...',
defaultFileName: 'Dokument',
pdf: 'Portable Document Format (.pdf)',
png: 'Portable Network Graphics (.png)',
svg: 'Scalable Vector Graphics (.svg)',
labels: {
fileName: 'Dateiname',
saveAsType: 'Speichern als',
page: 'Seite'
}
},
okText: 'OK',
save: 'Speichern',
cancel: 'Abbrechen',
search: {
inputLabel: 'Suchtext',
matchCase: 'Groß-/Kleinschreibung beachten',
next: 'Nächster Treffer',
previous: 'Vorheriger Treffer',
close: 'Schließen',
of: 'von'
}
}
});
}