Export to Excel but keeping styles

2 posts, 0 answers
  1. Ezequiel
    Ezequiel avatar
    36 posts
    Member since:
    Oct 2011

    Posted 12 Aug 2015 Link to this post

    Hi, I have a grid that I recently upgraded from old Telerik MVC Extensions.

    before, the user could select, copy and paste to excel and the styles were keep in Excel.

     Now, I'm adding a button to Export to Excel, but styling is not exported.

     Is there a way to do that?


    .ToolBar(bar => bar.Excel().Text(Shared.buttonExportExcel))

    .DataSource(ds => ds.Ajax().Read(read => read.Action("ReadNumber", "QueryNumbers").Data("getFilter")) ​

    .Columns(columns =>{
    columns.Bound(c => c.Description);
    columns.Bound(c => c.Initial);
    columns.Bound(c => c.Final);
    .Events(ev => ev.DataBound("volumeDataBound")))

    and this is my javascript for changing styles:

    function volumeDataBound(e)
        var grid = this;
        var currentRecords = grid.dataSource.view();
        for (var i = 0; i < currentRecords.length; i++) {
            //currentRecords[i] is the current dataItem
            var item = currentRecords[i];
            if(item.DataCorrida==null || item.DataCorrida == '') {
                var tr = grid.tbody.find("[data-uid='" + item.uid + "']");
                tr.find("td.k-hierarchy-cell .k-icon").removeClass();
            if (item.IsShipped) {
                grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("shipped-row");
            else if(item.IsRemoved){
                grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("removed-row");
                grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("regular-row");

    Also, I'm not sure if this is the best way to change styles.

  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2213 posts

    Posted 14 Aug 2015 Link to this post

    Hello Ezequiel,

    The currently used Kendo UI theme and custom styles are not included in the exported document. Custom styling could be manually applied by using the excelExport event of the Grid. For example - coloring the alternating rows. All cell properties that could be customized could be found at the following Workbook API documentation page.

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top