How to add watermark/logo/disclaimer in kendo export to excel from grid

[Pramod]

Hi,

Can anyone help me out here for, how to add watermark/logo/disclaimer in kendo export to excel from grid.

below code snippets for reference which i am using currently:

Grid UI:

<div class="panel panel-default">
<div class="panel-heading position-relative border-0">
@Html.DisplayNameFor(m => m.ClSearchResultTitle)
<div class="btn-right">
<button class="btn btn-primary btn-sm" id="btnExportToPdf"><i class="fa fa-file-pdf-o"></i></button>
<button class="btn btn-primary btn-sm" id="btnExportToExcel"><i class="fa fa-file-excel-o"></i></button>
<button class="btn btn-primary btn-sm" id="btnPrint"><i class="fa fa-print"></i></button>
</div>
</div>

@(Html.Kendo().Grid<PracticeLinkWebServices.ViewModel.AdminViewModel.AimImportSummaryViewModel>
().EnableCustomBinding(true)
.Name("GridDetails")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf.AllPages().AvoidLinks().Title("AIMImportSummary").PaperSize("A4").Scale(0.8).Margin("2cm", "1cm", "1cm", "1cm").Landscape().RepeatHeaders().TemplateId("page-template").FileName("AIMImportSummary.pdf"))
.ToolBar(tools => tools.Excel()).Excel(excl => excl.AllPages(true).FileName("AimImportSummary.xlsx"))
.Events(e => e.PdfExport("PdfExportEvent"))
.Columns(columns =>
{
columns.Bound(p => p.EventDate).Width(150).Title(StaticHelpers.GetAdminResourceByTitles("Admin_AimImportSummary_GrdContentGrid_EventDate")).ClientTemplate("#=FormattedEventDate#").HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { style = "text-align:center" });
columns.Bound(p => p.PageName).Width(150).Title(StaticHelpers.GetAdminResourceByTitles("Admin_AimImportSummary_GrdContentGrid_PageName"));
columns.Bound(p => p.CountPl).Width(150).Title(StaticHelpers.GetAdminResourceByTitles("Admin_AimImportSummary_GrdContentGrid_PLCount")).ClientTemplate("#= FormattedPlCountAction#");
columns.Bound(p => p.CountAnonymous).Width(150).Title(StaticHelpers.GetAdminResourceByTitles("Admin_AimImportSummary_GrdContentGrid_CountAnonymous")).ClientTemplate("#= FormattedAnonymousCountAction#");

columns.Template(p => p.PageName).Width(150).Title(StaticHelpers.GetAdminResourceByTitles("Admin_AimImportSummary_GrdContentGrid_Action")).ClientTemplate("<div class='admin-btn-edit'><a href='" + Url.Action("AimSummaryDetail", "Content", new { eventDate = "#= FormattedEventDate#", pageId = "#= PageId#", url = "#= Url#", email = "#= Email#", clientId = "#= MemberId#", recordType = "#= RecordType#",jobId="#= JobId#" }) + "' title=\"" + "View Summary Detail" + "\">" + "<i class='fa fa-pencil-square-o'></i>" + "</a></div>").Width(50).HtmlAttributes(new { @class = "text-center" }).HtmlAttributes(new { @class = "text-center" });

}).Pageable(pageable => pageable.Refresh(true).PageSizes(AppConstants.PageSizeValues).ButtonCount(5)
.Messages(msg => msg.Display(AppConstants.GridPagerMessage.Replace("[]", "AIM Import Summary.")))
)
.Sortable().Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell)).AutoBind(false)
.ColumnMenu(c => c.Enabled(AppConstants.ShowColumnMenu)).DataSource(dataSource => dataSource.Ajax().Sort(x => x.Add("EventDate").Descending()).Events(e => e.Error("RedirectToError").RequestEnd("onRequestEnd"))
.Read(read => read.Action("AimImportSummaryGrid", "Content").Data("SearchCriteria"))
.Total((int)@Model.RecordCount).PageSize(AppConstants.DefaultPageSize)
.ServerOperation(true)
.Model(a => a.Id(p => p.PageId)))
.NoRecords(x => x.Template(AppConstants.NoRecordsFoundText))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)

<div class="no-results">@Html.DisplayNameFor(m => m.ClSumitSerach)</div>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
@Html.HtmlLabelFor(x => x.ClSearchTitle)
</div>
</div>
</script>
</div>


Jquery:

$('#btnExportToExcel').on('click', function () {
    $('#GridDetails').find('.k-grid-toolbar').find('.k-grid-excel').trigger('click');
});

[Veselin Tsvetanov]

Hello Pramod,

The desired could be achieved by defining a Page template for the exported PDF file:

    <script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page #:pageNum# of #:totalPages#</div>
                This is a header.
            </div>
            
            <div style="position: relative; font-size: 100px; opacity: 0.3; top: -500px; z-index: 10;">This is watermark content</div>
            
            <div class="footer">
                This is a footer.
                Page #:pageNum# of #:totalPages#
            </div>
        </div>
    </script>

Here is a small sample implementing the above suggestion:

https://dojo.telerik.com/oTuzuSaG/4

Regards,
Veselin Tsvetanov
Progress Telerik