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

Exporting Kendo Grid to excel with cells borders

18 Answers 723 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Eduardo
Top achievements
Rank 1
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"))

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

18 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 17 Apr 2015, 11:33 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eduardo
Top achievements
Rank 1
answered on 17 Apr 2015, 12:08 PM
Actually I need not put color on the cellborder but only create a cellborder. It's possible ?
0
Dimiter Madjarov
Telerik team
answered on 20 Apr 2015, 08:13 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eyal
Top achievements
Rank 1
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
                }
            };

 

 

 

 

0
Dimiter Madjarov
Telerik team
answered on 19 Apr 2016, 08:21 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fan
Top achievements
Rank 1
answered on 20 Apr 2016, 07:50 PM
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!
0
Dimiter Madjarov
Telerik team
answered on 21 Apr 2016, 08:31 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fan
Top achievements
Rank 1
answered on 21 Apr 2016, 01:52 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 22 Apr 2016, 08:48 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fan
Top achievements
Rank 1
answered on 26 Apr 2016, 04:09 PM
Hi Dimiter or others, do you have a solution for this? Thanks.
0
Dimiter Madjarov
Telerik team
answered on 27 Apr 2016, 07:06 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fan
Top achievements
Rank 1
answered on 27 Apr 2016, 02:21 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2016, 07:44 AM

Hello Fan,

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

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fan
Top achievements
Rank 1
answered on 28 Apr 2016, 01:35 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2016, 02:43 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
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,

0
Dimiter Madjarov
Telerik team
answered on 15 Feb 2017, 08:28 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mark
Top achievements
Rank 1
answered on 15 Feb 2017, 10:30 AM
Thank you Dimiter, that seems to have worked.
Tags
Grid
Asked by
Eduardo
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Eduardo
Top achievements
Rank 1
Eyal
Top achievements
Rank 1
Fan
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or