From 46aeeb228a7de79c22fba665e6a28fc78c14e8b2 Mon Sep 17 00:00:00 2001
From: ceolter <niall.crosby@gmail.com>
Date: Thu, 28 Jul 2016 16:10:08 +0100
Subject: [PATCH] fixed rendering issues when grouping was set

---
 src/ColDefFactory.jsx      | 20 ++++++++++++--------
 src/SkillsCellRenderer.jsx |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/ColDefFactory.jsx b/src/ColDefFactory.jsx
index 0685223..d8f714a 100644
--- a/src/ColDefFactory.jsx
+++ b/src/ColDefFactory.jsx
@@ -16,9 +16,9 @@ export default class ColDefFactory {
             {
                 headerName: 'Employee',
                 children: [
-                    {headerName: "Name", field: "name",
+                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
                         width: 150, pinned: true},
-                    {headerName: "Country", field: "country", width: 150,
+                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
                         // not bothering with React for country, as it's a simple HTML string
                         cellRenderer: countryCellRenderer, pinned: true,
                         filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
@@ -27,13 +27,13 @@ export default class ColDefFactory {
             {
                 headerName: 'IT Skills',
                 children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills',
+                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
                         // using ag-Grid's React cellRenderer factory
                         cellRenderer: reactCellRendererFactory(SkillsCellRenderer),
                         // using ag-Grid's React filter factory
                         filter: reactFilterFactory(SkillsFilter)
                     },
-                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120,
+                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
                         // using ag-Grid's React cellRenderer factory
                         cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer),
                         // using ag-Grid's React filter factory
@@ -56,8 +56,12 @@ export default class ColDefFactory {
 // this is a simple cell renderer, putting together static html, no
 // need to use React for it.
 function countryCellRenderer(params) {
-    var flag = "<img border='0' width='15' height='10' " +
-        "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
-        + RefData.COUNTRY_CODES[params.value] + ".png'>";
-    return flag + " " + params.value;
+    if (params.value) {
+        var flag = "<img border='0' width='15' height='10' " +
+            "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+            + RefData.COUNTRY_CODES[params.value] + ".png'>";
+        return flag + " " + params.value;
+    } else {
+        return null;
+    }
 }
diff --git a/src/SkillsCellRenderer.jsx b/src/SkillsCellRenderer.jsx
index 5fe5bce..71361e4 100644
--- a/src/SkillsCellRenderer.jsx
+++ b/src/SkillsCellRenderer.jsx
@@ -7,7 +7,7 @@ export default class SkillsCellRenderer extends React.Component {
         var skills = [];
         var rowData = this.props.params.data;
         RefData.IT_SKILLS.forEach( (skill) => {
-            if (rowData.skills[skill]) {
+            if (rowData && rowData.skills && rowData.skills[skill]) {
                 skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
             }
         });