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');
});

I need to print the kendo grid result from client side,
I have the result on the client and I do not want to go back to the server, 
You have a way to do this?

Hi,

Can anyone help me out here for my situation, how can i add logo and disclaimer on the every page bottom while doing print of kendo grid result set.

Thanks in advance!

Hello,

 

I am looking for help regarding preventing a kendo spreadsheet from executing html that is pasted into a cell.  I have tried $(document).on('paste', function () {}) and the kendo paste function prevent defaults, but neither or these worked.  Any suggestions?

Example:

Dojo: https://dojo.telerik.com/AjomeMOH/5

Paste value : <img src=x onerror=alert(123)>

 

Thanks

Hello,

        How to use Component Type in datetime picker MVVM? i tried using data-component-type="modern" , but it didnt worked 

Hi!

I have been scouring through the forums and documentation but the way a grid gets tooltip is very confusing to me. we need to have a separate tooltip control and traverse the grid and apply tooltip in it.

Is there a way such as:

 

Check line # 24.

I searched about this a lot and I'm confused.
I'm a beginner web developer and I'm about to finish Javascript's basics, I will go to libraries and stuff like that
So I want your answer, do I need to learn Jquery or just use Javascript DOM?
I heard that Jquery is outdated and is getting ditched in favor of React so I'm confused right now.

Telerik,

As per your article here - https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/scrolling/scroll-views-horizontally

 

If you do this, then enable selectable: true - it doesnt work correctly, essentially it only selects ever X group - hard to explain, please watch the video.

Is there a fix for this?

You can see the issue in the attached video (ZIPPED) and here is a modified dojo from yours with just selectable set.

https://dojo.telerik.com/@daniel_j/arUVUMAY

Thank You.

 

I'm having a similar issue as reported here: https://www.telerik.com/forums/drawdom-with-cloned-chart-fails#ko3KfThygUiX9Q22tdM4ZQ

I'm trying to export a chart to a pdf document that also includes some text and a grid. In my case the chart is a bubble chart. When I export I am only getting one bubble to display on the chart in the pdf even though the rest of the bubbles are displayed on the screen. If I add a setTimeout(function() {// code to finish exporting},5000); to my code I can get it to work but I don't like the idea of relying on setTimeout. I tried using the "render" event but that also only gave me one bubble in the final printout. When I tried the dataBound event it never fired. How do I fix this?

Unfortunately,when I go to delete an item from the grid the grid is not properly updating.  

I've tried 3 things and I haven't had any luck:

1.  $("#userListGrid").data("kendoGrid").dataSource.read;
     $("#userListGrid").data("kendoGrid").refresh();

2.  $('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
          $('#userListGrid').data('kendoGrid').refresh();
     });

3.  KendoGridRefresh();

Here is the code for the function:

function KendoGridRefresh() {
        var grid = $('#userListGrid').data('kendoGrid');
        grid.dataSource.read();
    }

 

Here is the code for the grid:

<div class="content-container">
    <div class="container">
        <h3 class="d-inline">Current Users</h3>
        <button class="btn btn-primary d-inline mb-2 ml-5" onclick="window.location.href = '/user-maintenance/create-new-user'">Create New User</button>

        <div class="row p-0 table-container striped">
            <div id="userListGrid"></div>
        </div>
    </div>
    <div id="delete-confirm-modal" style="background-color: white"></div>
</div>


<script type="text/javascript">
    // Sticky header
    function onDataBound() {
        $("#loader-spinner").hide();

        var wrapper = this.wrapper,
            toolbar = wrapper.find(".k-grid-toolbar"),              // e.g. button to export spreadsheet
            groupingHeader = wrapper.find(".k-grouping-header"),    // interactive tools
            header = wrapper.find(".k-grid-header");                // column headers

        function resizeFixed() {
            var paddingRight = parseInt(toolbar.css("padding-right"));
            toolbar.css("width", wrapper.width() - paddingRight - 3);

            paddingRight = parseInt(groupingHeader.css("padding-right"));
            groupingHeader.css("width", wrapper.width() - paddingRight - 3);

            paddingRight = parseInt(header.css("padding-right"));
            header.css("width", wrapper.width() - paddingRight);
        }

        function scrollFixed() {
            var navbarHeaderHeight = 0;

            if ($(".nav-side-menu").height() <= 100) { // On mobile device or small screen
                navbarHeaderHeight = 0;
            } else { // Full screen
                navbarHeaderHeight = 100;
            }

            var offset = $(this).scrollTop(),
                tableOffsetTop = wrapper.offset().top - navbarHeaderHeight;


            if (offset < tableOffsetTop) {
                toolbar.removeClass("fixed-header");
                toolbar.removeAttr("style");

                groupingHeader.removeClass("fixed-header");
                groupingHeader.removeAttr("style");

                header.removeClass("fixed-header");
                header.removeAttr("style");

            } else if (offset >= tableOffsetTop) {

                toolbar.addClass("fixed-header");
                toolbar.css("top", navbarHeaderHeight);

                groupingHeader.addClass("fixed-header");
                groupingHeader.css("top", navbarHeaderHeight + toolbar.outerHeight());

                header.addClass("fixed-header");
                header.css("top", navbarHeaderHeight + toolbar.outerHeight() + groupingHeader.outerHeight());
            }
        }

        resizeFixed();
        $(window).resize(resizeFixed);
        $(window).resize(scrollFixed);

        $(window).scroll(resizeFixed);
        $(window).scroll(scrollFixed);

        $(".content-container").scroll(resizeFixed);
        $(".content-container").scroll(scrollFixed);
    }


    var externalId = "";
    var firstName = "";
    var lastName = "";
    var emailAddress = "";

    var confirmDelete = function (eid, firstN, lastN, emailA) {
        var dialog = $("#delete-confirm-modal");
        externalId = eid;
        firstName = firstN;
        lastName = lastN;
        emailAddress = emailA;

        if (dialog.data("kendoDialog")) {
            dialog.data("kendoDialog").open();
        } else {
            dialog.kendoDialog({
                width: "450px",
                title: "Confirm delete",
                closable: true,
                modal: true,
                content: "<p>Confirm that you wish to delete user " + firstName + " " + lastName + "(" + emailAddress + "). Once this is done, it cannot be reversed.</p>",
                actions: [
                    {
                        text: "Cancel",
                        primary: true
                    }, {
                        text: "Confirm",
                        action: function (e) {
                            var url = "/apic/usermaintenance/deleteuser/" + externalId;
                            $.get(url,
                                function (data) {
                                    //$("#userListGrid").data("kendoGrid").dataSource.read;
                                    //$("#userListGrid").data("kendoGrid").refresh();

                                    /*$('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
                                        $('#userListGrid').data('kendoGrid').refresh();
                                    });*/

                                    KendoGridRefresh();
                                    
                                    kendo.alert("User has been deleted");
                                }).fail(function () {
                                    kendo.alert("Unable to delete user. An error has occured. Please try again.");
                                });
                                                                               }
                    }
                ],
                close: onClose
            });
        }
    };

    var deleteUser = function () {

    };

    var onClose = function (e) {
        externalId = "";
        firstName = "";
        lastName = "";
        emailAddress = "";
    };

    function KendoGridRefresh() {
        var grid = $('#userListGrid').data('kendoGrid');
        grid.dataSource.read();
    }

    $(document).ready(function () {
        var roles = [{
            id: 1, name: "JB-Admin", key: 1, value: "JB-Admin"
        }, {
            id: 2, name: "M-Admin", key: 2, value: "M-Admin"
        }, {
            id: 3, name: "NM-Admin", key: 3, value: "NM-Admin"
        }, {
            id: 4, name: "Pricing", key: 4, value: "Pricing"
        }, {
            id: 5, name: "Orders", key: 5, value: "Orders"
        }, {
            id: 6, name: "Orders-U", key: 6, value: "Orders-U"
        }, {
            id: 7, name: "Contracts", key: 7, value: "Contracts"
        }, {
            id: 8, name: "Exchange", key: 8, value: "Exchange"
        }, {
            id: 9, name: "Destination", key: 9, value: "Destination"
        }, {
            id: 10, name: "Destination-C", key: 10, value: "Destination-C"
        }, {
            id: 11, name: "Nominations", key: 11, value: "Nominations"
        }, {
            id: 12, name: "Nominations-C", key: 12, value: "Nominations-C"
        }, {
            id: 13, name: "Nominations-U", key: 13, value: "Nominations-U"
        }, {
            id: 14, name: "Store", key: 14, value: "Store"
        }, {
            id: 15, name: "Retail Locator", key: 15, value: "Retail Locator"
        }, {
            id: 16, name: "Lessonly", key: 16, value: "Lessonly"
        }, {
            id: 17, name: "Inspection Form", key: 17, value: "Inspection Form"
        }, {
            id: 18, name: "Products", key: 18, value: "Products"
        }, {
            id: 19, name: "QA/QC", key: 19, value: "QA/QC"
        }, {
            id: 20, name: "Presentations", key: 20, value: "Presentations"
        }, {
            id: 21, name: "About Us", key: 21, value: "About Us"
        }, {
            id: 22, name: "Marketing", key: 22, value: "Marketing"
        }, {
            id: 23, name: "Marketing-C", key: 23, value: "Marketing-C"
        }, {
            id: 24, name: "Marketing-U", key: 24, value: "Marketing-U"
        }, {
            id: 25, name: "Marketing-D", key: 25, value: "Marketing-D"
        }
        ];

        $("#userListGrid").kendoGrid({
            dataSource: {
                transport: {
                    read: "/apic/usermaintenance/getmyusers",
                    dataType: "json"
                },
                schema: {
                    data: function (response) {
                        return response;
                    },
                    model: {
                        fields: {
                            UserId: { type: "string" },
                            ExternalId: { type: "string" },
                            EmailAddress: { type: "string" },
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            Display: { type: "string" },
                            Company: { type: "string" },
                            AxAccountNumber: { type: "string" },
                            MemberType: { type: "string" },
                            AccessPricing: { type: "string" },
                            AccessOrders: { type: "string" },
                            AccessContracts: { type: "string" },
                            AccessExchange: { type: "string" },
                            AccessDestination: { type: "string" },
                            AccessNominations: { type: "string" },
                            AccessMarketingCalendar: { type: "string" },
                            AccessStore: { type: "string" },
                            AccessRetailLocator: { type: "string" },
                            AccessLessonly: { type: "string" },
                            AccessInspectionForm: { type: "string" },
                            AccessProductsList: { type: "string" },
                            AccessQaQc: { type: "string" },
                            AccessPresentations: { type: "string" },
                            AccessAboutUs: { type: "string" },
                            FilterString: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                sort: { field: "AxAccountNumber", dir: "asc" }
            },
            dataBound: onDataBound,
            dataBinding: function (arg) {

            },
            groupable: true,
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            toolbar: ["search", "excel"],
            excel: {
                fileName: "UserList.xlsx",
                allPages: true
            },
            refresh: {
                reload: true
            },
            resizable: true,
            columns: [
                {
                    template: '<a href="/user-maintenance/edit-user?userId=#= ExternalId #"><div class="edit-icon" title="edit"></div></a>',
                    width: '30px'
                },
                {
                    field: "EmailAddress",
                    title: "Email Address",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    template: "#= LastName #, #= FirstName #",
                    title: "Name",
                    field: "Display",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    title: "Company",
                    field: "Company",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    title: "Account Number",
                    field: "AxAccountNumber",
                    filterable: {
                        multi: true,
                        search: true
                    },
                    width: '90px'
                }, {
                    template: kendo.template($("#user-rights-template").html()),
                    title: "Permissions",
                    field: "FilterString",
                    filterable: {
                        search: true
                    }
                },
                {
                    template: '<button class="btn btn-danger btn-sm" onclick="confirmDelete(\'#=ExternalId#\', \'#=FirstName#\', \'#=LastName#\', \'#=EmailAddress#\')" style="padding: .25rem;">X</button>',
                    width: '40px'
                },
            ]
        });
    });
</script>
<script type="text/x-kendo-template" id="user-rights-template">
    #if(MemberType==='JoeBlowAdmins') {#
    <span class='badge badge-pill badge-info'>JB-Admin</span>
    #}#
    #if(MemberType==='JoeBlowUsers') {#
    <span class='badge badge-pill badge-info'>JB-User</span>
    #}#
    #if(MemberType==='MemberAdmin') {#
    <span class='badge badge-pill badge-info'>M-Admin</span>
    #}#
    #if(MemberType==='MemberUser') {#
    <span class='badge badge-pill badge-info'>M-User</span>
    #}#
    #if(MemberType==='NonMemberAdmin') {#
    <span class='badge badge-pill badge-info'>NM-Admin</span>
    #}#
    #if(MemberType==='NonMemberUser') {#
    <span class='badge badge-pill badge-info'>NM-User</span>
    #}#
    #if(AccessPricing==='Read'){#
    <span class='badge badge-pill badge-info'>Pricing</span>
    #}#
    #if(AccessOrders==='Read'){#
    <span class='badge badge-pill badge-info'>Orders</span>
    #}#
    #if(AccessOrders==='Update'){#
    <span class='badge badge-pill badge-info'>Orders-U</span>
    #}#
    #if(AccessContracts==='Read'){#
    <span class='badge badge-pill badge-info'>Contracts</span>
    #}#
    #if(AccessExchange==='Read'){#
    <span class='badge badge-pill badge-info'>Exchange</span>
    #}#
    #if(AccessDestination==='Read'){#
    <span class='badge badge-pill badge-info'>Destination</span>
    #}#
    #if(AccessDestination==='Create'){#
    <span class='badge badge-pill badge-info'>Destination-C</span>
    #}#
    #if(AccessNominations==='Read'){#
    <span class='badge badge-pill badge-info'>Nominations</span>
    #}#
    #if(AccessNominations==='Create'){#
    <span class='badge badge-pill badge-info'>Nominations-C</span>
    #}#
    #if(AccessNominations==='Update'){#
    <span class='badge badge-pill badge-info'>Nominations-U</span>
    #}#
    #if(AccessMarketingCalendar==='Read'){#
    <span class='badge badge-pill badge-info'>Marketing</span>
    #}#
    #if(AccessMarketingCalendar==='Create'){#
    <span class='badge badge-pill badge-info'>Marketing-C</span>
    #}#
    #if(AccessMarketingCalendar==='Update'){#
    <span class='badge badge-pill badge-info'>Marketing-U</span>
    #}#
    #if(AccessMarketingCalendar==='Delete'){#
    <span class='badge badge-pill badge-info'>Marketing-D</span>
    #}#
    #if(AccessStore==='Read'){#
    <span class='badge badge-pill badge-info'>Store</span>
    #}#
    #if(AccessRetailLocator==='Read'){#
    <span class='badge badge-pill badge-info'>Retail Locator</span>
    #}#
    #if(AccessLessonly==='Read'){#
    <span class='badge badge-pill badge-info'>Lessonly</span>
    #}#
    #if(AccessInspectionForm==='Read'){#
    <span class='badge badge-pill badge-info'>Inspection Form</span>
    #}#
    #if(AccessProductsList==='Read'){#
    <span class='badge badge-pill badge-info'>Products</span>
    #}#
    #if(AccessQaQc==='Read'){#
    <span class='badge badge-pill badge-info'>QA/QC</span>
    #}#
    #if(AccessPresentations==='Read'){#
    <span class='badge badge-pill badge-info'>Presentations</span>
    #}#
    #if(AccessAboutUs==='Read'){#
    <span class='badge badge-pill badge-info'>About Us</span>
    #}#
</script>

 

Can someone tell me what I might be doing wrong?