mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed rendering issues when grouping was set

Browse Source
This commit is contained in:
ceolter
2016-07-28 16:10:08 +01:00
parent 44c06b41e3
commit 46aeeb228a
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/ColDefFactory.jsx
View File

@@ -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;
}
}

2
src/SkillsCellRenderer.jsx
View File

@@ -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} />);
}
});