This is a migrated thread and some comments may be shown as answers.

Exporting Kendo Grid to excel with cells borders

18 Answers 1425 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Eduardo asked on 16 Apr 2015, 02:02 PM

Kendo grid does not export to excel with cell borders, someone has a solution ? Follow my code:

.Events(x => x.ExcelExport("excelExport"))

var sheet = e.workbook.sheets[0];

for (var i = 0; i < sheet.rows.length; i++) {
sheet.rows[0].cells[0].background = "#ffffff";
sheet.rows[0].cells[1].background = "#ffffff";
sheet.rows[0].cells[2].background = "#ffffff";
sheet.rows[0].cells[3].background = "#ffffff";

for (var ci = 1; ci < sheet.rows[i].cells.length; ci++) {
sheet.rows[i].cells[ci].color = "black";

sheet.rows[i].cells[ci].border = "black"; // HERE

}

}
</script>

18 Answers, 1 is accepted

answered on 18 Apr 2016, 02:22 PM

Hi,

in documentation this feature supported:

http://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook#configuration-sheets.rows.cells.borderBottom.color

but it's not working, i cant see any borders on the excel generated.

can you please verify the configuration for the cell is correct and this feature is supported.

thanks

var Cell = {
value: "test 123",
background: "#F2FAFF",
color: "#525252",
vAlign: "center",
wrap: true,
fontSize: 10,
borderTop: {
color: "#ff0000",
size: 5
},
borderBottom: {
color: "#ff0000",
size: 5
},
borderLeft: {
color: "#ff0000",
size: 5
},
borderRight: {
color: "#ff0000",
size: 5
}
};

answered on 21 Apr 2016, 01:52 PM

bordertop.jpg

Thanks Dimiter for your reply. I can access the rows without problem in excelExport event handler. My issue is it fails when I tried to set the borderTop.size to 1 for the cells. I attached a screenshot in debug mode, you can see the cell does not have a property of borderTop.size. Or am I looking at wrong place? Thanks.

answered on 14 Feb 2017, 05:34 PM

Hi,

I've been trying to get this working with the excelExport event on an MVC grid. Whilst I’m not getting any JavaScript errors, in the Excel file produced it doesn’t show the borders at all. I’ve upgraded my project using the ASP.NET MVC Kendo framework to version 2016.1.112.

My JavaScript code is listed below, using examples from this website:
<code>

// Event function for controlling the Excel Exports. NOTE: Not used by the Sites tab.
var exportFlag = false;
function excelExport(e) {
    if (!exportFlag) {
        // Code to run before running the Excel export.

        // Show the spinner.
        showProgress();

        // Tell the Excel export to run.
        e.preventDefault();

        // Loop each cell to add a border.
        for (var i = 0; i < e.workbook.sheets[0].rows.length; i++) {
            var $row = e.workbook.sheets[0].rows[i];
            for (var j = 0; j < $row.cells.length; j++) {
                var $cell = $row.cells[j];
                $cell["borderTop"] = { color: "#FF0000", size: 3 };
                $cell["borderRight"] = { color: "#FF0000", size: 3 };
                $cell["borderBottom"] = { color: "#FF0000", size: 3 };
                $cell["borderLeft"] = { color: "#FF0000", size: 3 };
            }
        }

        exportFlag = true;
        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    }
    else {
        // Code to run after running the Excel export.

        // Hide the spinner.
        hideProgress();

        exportFlag = false;
    }
}
</code>

Any help would be appreciated.

Thanks,