Customise Excel Export

4 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 06 Jan Link to this post

    Hello,

    I've been reading up on the documentation about the customisation of exported excel documents from the grid.  My project is an MVC applicaation using razor views.  My question is how do you marry the grid to the javascript so that when the user presses "export" it runs the function?

    For example my grid looks like this:

      @(Html.Kendo().Grid<Widget_Tests.Models.tbl_data>()
            .Name("Grid")
            .Columns(columns =>
                {
                    columns.Bound(c => c.old_id).Title("Old ID");
                    columns.Bound(c => c.name).Title("Name");
                    columns.Bound(c => c.type).Title("Vessel Type");
                    columns.Bound(c => c.company).Title("Company");        
                }
            )                
            .ToolBar(toolbar =>
                {
                    toolbar.Excel();                               
                }
            )
            .Pageable()
            .Scrollable()
            .Excel(excel => excel
                .FileName("MyGrid.xlsx")            
                .AllPages(true)
                .Filterable(true)           
                )
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                .Read(read => read.Action("tbl_data_Read", "Home"))            
                )            
            )

    Here is the javascript I found in the documentation:

      function saveExcel() {
            var workbook = new kendo.ooxml.Workbook({
                sheets: [
                  {
                      columns: [{ autoWidth: true }],
                      rows: [
                        {
                            cells: [
                              {
                                  value: "bold and italic",
                                  bold: true,
                                  italic: true
                              }
                            ]
                        },
                        {
                            cells: [
                              {
                                  value: "red text on blue background",
                                  color: "#ff0000",
                                  background: "#0000ff"
                              }
                            ]
                        },
                        {
                            cells: [
                              {
                                  value: "Arial 20px",
                                  fontSize: 20,
                                  fontName: "Arial"
                              }
                            ]
                        },
                        {
                            cells: [
                              {
                                  value: "Right aligned",
                                  hAlign: "right"
                              }
                            ]
                        },
                        {
                            cells: [
                              {
                                  value: "Centered horizontally and vertically",
                                  vAlign: "center",
                                  hAlign: "center",
                                  rowSpan: 2
                              }
                            ]
                        }
                      ]
                  }
                ]
            });
        };

    kendo.saveAs({
        dataURI: workbook.toDataURL(),
        fileName: "Test.xlsx"
    });

     How do these go together?

     

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 08 Jan Link to this post

    Hello Allan,

    The linked JavaScript code demonstrates how to manually create an Excel document by constructing the Workbook and invoking the saveAs method.

    Regarding the question, the Excel export button invokes the saveAsExcel method, which internally executes a logic similar to the linked from the documentation page i.e. constructs the Workbook from the Grid configuration and saves the file.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 22 Feb in reply to Dimiter Madjarov Link to this post

    Dimiter Madjarov said:

    Hello Allan,

    The linked JavaScript code demonstrates how to manually create an Excel document by constructing the Workbook and invoking the saveAs method.

    Regarding the question, the Excel export button invokes the saveAsExcel method, which internally executes a logic similar to the linked from the documentation page i.e. constructs the Workbook from the Grid configuration and saves the file.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

     

    Sorry where did you link this code?

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 22 Feb Link to this post

    Hello Allan,

    Sorry for the inconvenience. I was referring to your code from the first post, in which the workbook is manually constructed.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready