Kendo UI – Grid et export Excel

Kendo ui

Dans cet article, je me propose de vous présenter l'utilisation de la librairie Kendo, éditée par Telerik, et plus particulièrement de son composant « Grid » et sa fonctionnalité d'export Excel.

1 - La librairie Kendo

Kendo est disponible par l’intermédiaire de plusieurs bundles, qui sont pour certains adaptés à un choix technologique particulier (ASP.NET MVC, JSP en l'occurence). Une version gratuite (Kendo UI) de la librairie est disponible, cependant elle n'inclut pas le composant Grid. A cet effet, notre choix se portera sur la version version « Professionnal » (précédemment Complete), qui nous permettra de travailler en Javascript et HTML.  Un comparatif plus détaillé des différentes versions est disponible à l’adresse suivante.

 2- Grid et DataSource

Le but de l'article est d'afficher une Grid dans un navigateur contenant un certain nombre d’informations relatives à des localités. L’une des colonnes de la Grid aura ses cellules composées d'un ensemble de valeurs. Nous souhaitons offrir la possibilité d'exporter les données au format Excel et nous voulons que chacune des valeurs d'un item soient inscrites dans sa colonne respective.

Pour répondre à ces exigences, nous allons devoir utiliser une Kendo DataSource, un autre composant de la librairie pouvant être lié à notre Grid mais aussi à un ensemble d'autres composants. La DataSource a plusieurs responsabilités au sein du framework Kendo dont voici un bref aperçu:

  • Récupérer les données localement ou depuis un service externe.
  • Maintenir la structure et le type des données.
  • Gérer les opérations de tri, groupement et pagination.

Une liste plus exhaustive des fonctionnalités est disponible à l'adresse suivante.

Dans notre cas, nous utiliserons une DataSource locale par souci de simplicité. Le json retourné est le suivant :

function getData() {
return [
      { ID: "1", Ville: "OZAN", CodePostal: "01190", Departement: "01" },
      { ID: "2", Ville: "CORMORANCHE-SUR-SAONE", CodePostal: "01290", Departement: "01" },
      { ID: "3", Ville: "PLAGNE", CodePostal: "01130", Departement: "01" },
      { ID: "4", Ville: "TOSSIAT", CodePostal: "01250", Departement: "01" },
      { ID: "5", Ville: "POUILLAT", CodePostal: "01250", Departement: "01" },
      { ID: "6", Ville: "TORCIEU", CodePostal: "01230", Departement: "01" },
      { ID: "7", Ville: "REPLONGES", CodePostal: "01620", Departement: "01" },
      { ID: "8", Ville: "CORCELLES", CodePostal: "01110", Departement: "01" },
      { ID: "9", Ville: "PERON", CodePostal: "01630", Departement: "01" },
      { ID: "10", Ville: "RELEVANT", CodePostal: "01990", Departement: "01" }
   ];
};
Data

2 - La page HTML

Il nous faut créer une page HTML dans laquelle nous ajoutons les références des sources JS/CSS de Kendo, ainsi qu’une référence à jQuery utilisé en interne par la librairie. Ne pas oublier d’ajouter la librairie « jszip », sans quoi Kendo ne pourra procéder à l'export. On ajoute dans la balise body de notre page une div vide (ayant pour ID « grid ») qui sera utilisée pour initialiser notre Grid par la suite.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Kendo Grid - Excel Export</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
    </head>

    <body>
        <div id="grid"></div>
    </body>
</html>
Code HTML

3 -  Initialisation de la Grid

Maintenant que la structure HTML de notre page est prête, nous pouvons nous occuper du  code Javascript qui se chargera d’initialiser la grid. On applique un certain nombre de propriétés nécessaires pour l'utilisation voulue.

 $(document).ready(function () {

        $("#grid").kendoGrid({
            columns: [
                { field: "ID" },
                { field: "Ville" },
                { title: "Detail", 
                   template: "#: CodePostal # - #: Departement #" 
                }
            ],
            dataSource: {
                data: getData(),
                pageSize: 3
            },
            filterable: true,
            sortable: true,
            pageable: true,
Initialisation de la Grid

Pour la colonne « Détail », nous utilisons la propriété template qui permet de prendre le contrôle sur le format des données d’une cellule. Dans notre cas, elle contiendra deux valeurs, que l'on délimite par des balises "#: #", ce qui permet par la suite à Kendo de reporter les valeurs adaptées en piochant dans le dataItem lié à la ligne.

4 - Mise en situation

Il ne nous reste plus qu’à tester le fonctionnement de notre grid. Si vous êtes curieux, direction le Kendo Dojo pour tester cela.

Côté client, on observe le bon affichage des données ainsi que la possibilité de manipuler la grille par l’intermédiaire de différents contrôles (tri, pagination, filtrage).

wbb_O7

Un clic sur le bouton « Export to excel » du header retourne bien un fichier excel. Cependant, la dernière colonne est vide .Cela est dû à l’utilisation de la propriété « template » de la colonne « Détail » que Kendo ne sait pas interpréter lors de l’export, la faute  au possible HTML contenu.

Afin de s’assurer d’avoir deux nouvelles colonnes (Code postal et Département) dans l’export, nous allons créer une nouvelle fonction que nous lierons à la propriété « excelExport » de notre grid. On y passe l'event ainsi qu'une référence à l'objet grid de notre page.

Début de l'initialisation de la grid ....
excel: {
        filterable: true,
        allPages: true
},
excelExport: function(e) { exportExcel(e, this); }

5 -  Implémenter la fonction d’export

La première section de la fonction est chargée de créer un array dans lequel on insère en première position le libellé des différentes colonnes de l’export.

 function exportExcel(e, $grid) {

                e.preventDefault();

                // Array contenant en première position l'entête de l'export
                var rows = [{
                    cells: [
                      { value: "Identifiant" },
                      { value: "Ville" },
                      { value: "Code Postal" },
                      { value: "Departement" },
                    ]
                }];

};

Il faut maintenant obtenir les différentes entrées que contiendra notre fichier Excel. Pour cela, nous créons une DataSource virtuelle à laquelle on applique les propriétés de la DataSource liée à notre Grid. Nous exécutons une opération « Read » puis une opération « View » sur la dataSource, ce qui nous retourne les dataitems voulus que l'on stocke dans une variable.

       // Création d'une dataSource virtuelle utilisant les options de la dataSource passée  à l'appel de la fonction
       var vDataSource = new kendo.data.DataSource({
            data: $grid.dataSource.data(),
            filter: $grid.dataSource.filter(),
            sort: $grid.dataSource.sort()
        });

        // Simule une operation de lecture sur la dataSource virtuelle : Force l'application des filtres et du tri sur les données
        vDataSource.read();

        // Retourne les données filtrées et triées
        var dataItems = vDataSource.view();

Maintenant que nous avons notre jeu de données, il suffit de le parcourir et d’ajouter une nouvelle entrée à notre array pour chacun de ces éléments. Dans notre situation, nous nous contentons de reporter les valeurs d'un dataItem dans leurs colonnes respectives, cependant il est tout à fait possible de prendre le contrôle du contenu à afficher.

 // Parcours des éléments récupèrés et ajouts dans l'array
for (var i = 0; i < dataItems.length; i++) {

      var dataItem = dataItems[i];

      rows.push({
            cells: [
               { value: dataItem.ID },
               { value: dataItem.Ville },
               { value: dataItem.CodePostal },
               { value: dataItem.Departement }
            ]
      });

}

Finalement, il ne reste plus qu’à créer un Workbook dans lequel nous définissons les différentes propriétés du fichier Excel, à savoir : son titre, les propriétés des colonnes de la feuille ainsi que les données à afficher.

                // Création du workbook et définition des propriétés des colonnes
                var workbook = new kendo.ooxml.Workbook({
                    sheets: [
                      {
                          columns: [
                            { autoWidth: true },
                            { autoWidth: true },
                            { autoWidth: true },
                            { autoWidth: true },
                            { autoWidth: true },
                            { autoWidth: true },
                            { autoWidth: true },
                          ],
                          title: "Export_total",
                          rows: rows
                      }
                    ]
                });

                // Sauvegarde / Stream le résultat au client
                kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "Export.xlsx" });

Après avoir relancé la page, puis avoir cliqué sur le bouton d'export, on obtient bien maintenant un export avec une colonne par valeur. Il est possible de tester cela sur cet autre Kendo Dojo.

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.