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

2 posts, 0 answers
  1. Pramod
    Pramod avatar
    4 posts
    Member since:
    Jan 2020

    Posted 15 Jul 2020 Link to this post


    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');
    });
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1236 posts

    Posted 17 Jul 2020 Link to this post

    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

Back to Top