Export to excel hierarchical grid/ hidden column

6 posts, 0 answers
  1. Shahinez
    Shahinez avatar
    8 posts
    Member since:
    Jul 2017

    Posted 07 Aug 2017 Link to this post

    Hello , 

    I had a hierarchical  grid and I want to export it to excel (JavaScript ) 

    The file is generated successfully but only the principal grid is exported.
    Also I want to export hidden column.

    Thank you for your prompt reply

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 Aug 2017 Link to this post

    Hello,

    I would suggest to take a look at the Export Detail Grids how-to article - the example demonstrates how to export detail Grids to Excel and merge their workbooks with the master Grid workbook.

    As for exporting initially hidden columns I would suggest to take a look at the http://dojo.telerik.com/UJUcU example. 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    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.
  3. Shahinez
    Shahinez avatar
    8 posts
    Member since:
    Jul 2017

    Posted 09 Aug 2017 in reply to Boyan Dimitrov Link to this post

    Hello , 

     

    Thank you for the code but I realised that hen I have a empty column, It's not exported , 

        <script type="text/jscript">
            $(document).ready(function () {
                var element = $("#grid").kendoGrid({
                    excel:
                    {
                        allPages: true,
                        fileName: "clients.xlsx",
                        proxyURL: "/save",
                        filterable: true
                    },
                    toolbar:
                    [
                        { name: "excel", text: "Export to excel" }
                    ],
                    columns:
                    [
                        { field: "Code_Client" },
                        { field: "Nom_Client"},
                        { field: "Groupe" },
                        { field: "Cote" },
                        { field: "Marche" },
                        { field: "Refere" ,hidden: true},
                        { field: "Nb_Employe" ,hidden: true},
                        { field: "Ca" ,hidden: true},
                        { field: "Type",hidden: true },
                        { field: " Commentaires" ,hidden: true},
                        { field: "Sous_Secteur" ,hidden: true},
                        { field: "Contact" ,hidden: true},
                        { field: "Adresse",hidden: true },
                        { field: "Téléphone" ,hidden: true},
                        { command: ["edit", "destroy"], title: " ", width: "170px" }
                    ],
                    editable: "popup",
                    height: 550,                       
                    dataSource:
                    {
                        transport:
                        {
                            read: {  url: "api/Clients", dataType: 'json'},
                          
                        },
                       schema: {
                        
                            total: "total",
                            fields: {
                              Code_Client: { type: "string" },
                              Nom_Client: { type: "string" },
                              Groupe: { type: "string" },
                              Cote: { type: "Boolean" },
                              Marche: { type: "string" },
                              Refere: { type: "string" },
                                Nb_Employe: { type: "string" },
                                Ca: { type: "string" },
                                Type: { type: "string" },
                                Commentaires: { type: "string" },
                                Sous_Secteur: { type: "string" },
                                Contact: { type: "string" },
                                Adresse: { type: "string" },
                                Téléphone : { type: "string" }
                                    }
                          
                          },
                    },
                    groupable: true,
                      sortable: true,
                      selectable: "multiple",
                      reorderable: true,
                      resizable: true,
                      sortable: true,
                    reorderable: true,
                     excelExport: excelExport,
                   
                    columnMenu: true,
                      pageable: {
                            refresh: true,
                            pageSizes: true,
                            previousNext: true,
                            info: true
                        },
            });
         });
     
            var exportFlag = false;
     
    function excelExport(e) {
      if (!exportFlag) {
        e.sender.showColumn(1);
        e.preventDefault();
        exportFlag = true;
        setTimeout(function () {
          e.sender.saveAsExcel();
        });
      }
    }
        </script>

     

    This is my code, 

     

    thank you in advance,

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 11 Aug 2017 Link to this post

    Hello Shahinez,

    I am not sure that I understand the current scenario here - an empty column is a column without any data or a hidden column? Could it be possible to send the response from the server in order to replicate the problem? Any additional information will be very helpful. 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    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.
  5. Shahinez
    Shahinez avatar
    8 posts
    Member since:
    Jul 2017

    Posted 14 Aug 2017 in reply to Boyan Dimitrov Link to this post

    Hello, 

    In my case a hidden column could be empty.

    Also when applying the code you have provided for me , certains column disappear after extracting to excel and appear again only if I refresh the page

    I extract data from the DATABASE with the code below.

    public List <Models.Clients> Get()
            {
                var client = from c in _context.Clients
                              select new Models.Clients
                               
                               {
                                         
                              Code_Client = (String)c.Code_Client ,
                              Nom_Client = (String)c.Nom_Client,
                              Groupe = (String)c.Groupe,
                              Secteur = (String)c.Secteur,
                              Marche = (String)c.Marche,
                              Nb_Employe = (String)c.Nb_Employe,
                              Ca = (String)c.Ca,
                              Type = (String)c.Type,
                              Commentaires = (String)c.Commentaires,
                              Sous_Secteur = (String)c.Sous_Secteur,
                              Contact = (String)c.Contact,
                              Adresse = (String)c.Adresse,
                              Téléphone = (String)c.Téléphone   ,
                                Cote = (bool) c.Cote,
                                Refere = (bool) c.Refere
                           };
                               
                          
                return client.ToList();
            }     
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 16 Aug 2017 Link to this post

    Hello Shahinez,

    After reviewing the code in your previous post I can see that after the excel export the hidden columns are not hidden. The approach shows how to show the hidden columns just for the excel export and then hide them again. Please refer to the code snippet that should be used: 

    var exportFlag = false;
     
            function excelExport(e) {
              if (!exportFlag) {
                e.sender.showColumn(1);
                e.preventDefault();
                exportFlag = true;
                setTimeout(function () {
                  e.sender.saveAsExcel();
                });
              } else {
                e.sender.hideColumn(1);
                exportFlag = false;
              }
            }

    Regards,
    Boyan Dimitrov
    Progress Telerik
    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.
Back to Top