Exporting Kendo Grid to excel with cells borders

[Eduardo]

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

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

<script type="text/javascript">
        function excelExport(e) {

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>

[Dimiter Madjarov]

Hello Eduardo,

Setting the cells border color is not supported. You could find all of the possible configuration options at the following documentation page.

Regards,
Dimiter Madjarov
Telerik

 

 

[Eduardo]

Actually I need not put color on the cellborder but only create a cellborder. It's possible ?

[Dimiter Madjarov]

Hello Eduardo,

This requirement is not supported. If you consider that it should be implemented for future versions, you could post a feature request in our user voice portal.

Regards,
Dimiter Madjarov
Telerik

 

 

[Eyal]

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

 

 

 

 

[Dimiter Madjarov]

Hello Eyal,


Please excuse us for this inconvenience. Indeed the feature is supported now, but the documentation does not describe it well enough. The supported values for the borders size are - 1 (results in "thin" border), 2 (results in "medium" border) and 3 (results in "thick" border). We will update the documentation to describe this properly.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fan]

I have the same need for setting the cell border for certain cells in Asp.Net MVC Grid. Does anyone have any example showing how to do it? I tried sheet.rows[rowIndex].cells[cellIndex].borderTop = 1 but it gives me an error. Thank you!

[Dimiter Madjarov]

Hello Fan,

If this code is executed in the excelExport event handler, you could access the rows like this:

e.workbook.sheets[0].rows

Regards,
Dimiter Madjarov
Telerik

 

 

[Fan]

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.

[Dimiter Madjarov]

Hello Fan,

The feature was added in the Q1 2016 release. I assume the reason for the issue is that you are using an older version of your end. Could you check it?

Regards,
Dimiter Madjarov
Telerik

 

 

[Fan]

Hi Dimiter or others, do you have a solution for this? Thanks.

[Dimiter Madjarov]

Hello Fan,

Are you still experiencing an issue with the feature? It is working as expected on our end with the mentioned Kendo UI version.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fan]

Yes I am still having an issue with it. I'm using Asp.Net MVC Grid. Do you have an example that I can take a look at? Thanks Dimiter.

[Dimiter Madjarov]

Hello Fan,

There is an example of this functionality in the Workbook documentation page. You could check it here.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fan]

Thanks Dimiter, I already checked that page before posting but still having issue. as I showed in the uploaded picture, there is no  property of borderTop.size that I can set in my javascript code, the eventhandler for ExcelExport.

[Dimiter Madjarov]

Hello Fan,

Did you check the currently used Kendo UI version? If it is Q1 2016 or newer, you could send us an isolated runnable example, here or in a support ticket, in which it is reproducing, so we could inspect the issue locally.

Regards,
Dimiter Madjarov
Telerik

 

 

[Mark]

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,

[Dimiter Madjarov]

Hello Mark,

In the current implementation, the logic for setting the borders is not executed at the correct place. It should be in the else statement instead. Could you try moving it there and let me know if that fixes the issue?

Regards,
Dimiter Madjarov
Telerik by Progress

[Mark]

Thank you Dimiter, that seems to have worked.