I am trying to get igGrid to generate a grid which would look something like this:
| | 2005/06 | 2006/07 | 2007/08 | 2008/09 | 2009/10 | 2010/11 | 2011/12 | 2023/13
|ID | 169530 | 169531 | 169532 | 169533 | 169534 | 169535 | 169536 | 169537
|Land | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
|Total | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107
I have 2 arrays, columns and countyPivot which contain the data needed to generate the igGrid.
The array called columns has this data:
columns[0] = {dataType: "string", headerText: "2005/06", hidden: false, key: "2005/06", width: "75px"}
columns[1] = {dataType: "string", headerText: "2006/07", hidden: false, key: "2006/07", width: "75px"}
columns[2] = {dataType: "string", headerText: "2007/08", hidden: false, key: "2007/08", width: "75px"}
columns[3] = {dataType: "string", headerText: "2008/09", hidden: false, key: "2008/09", width: "75px"}
columns[4] = {dataType: "string", headerText: "2009/10", hidden: false, key: "2009/10", width: "75px"}
columns[5] = {dataType: "string", headerText: "2010/11", hidden: false, key: "2010/11", width: "75px"}
columns[6] = {dataType: "string", headerText: "2011/12", hidden: false, key: "2011/12", width: "75px"}
columns[7] = {dataType: "string", headerText: "2012/13", hidden: false, key: "2012/13", width: "75px"}
And the array called countyPivot has this data:
countyPivot[0] = {{Key: "id", Value: 169530}, {Key: "TaxYear", Value: "2005/06"}, {Key: "Land", Value: 0}, {Key: "Total", Value: 100}}
countyPivot[1] = {{Key: "id", Value: 169531}, {Key: "TaxYear", Value: "2006/07"}, {Key: "Land", Value: 1}, {Key: "Total", Value: 101}}
countyPivot[2] = {{Key: "id", Value: 169532}, {Key: "TaxYear", Value: "2007/08"}, {Key: "Land", Value: 2}, {Key: "Total", Value: 102}}
countyPivot[3] = {{Key: "id", Value: 169533}, {Key: "TaxYear", Value: "2008/09"}, {Key: "Land", Value: 3}, {Key: "Total", Value: 103}}
countyPivot[4] = {{Key: "id", Value: 169534}, {Key: "TaxYear", Value: "2009/10"}, {Key: "Land", Value: 4}, {Key: "Total", Value: 104}}
countyPivot[5] = {{Key: "id", Value: 169535}, {Key: "TaxYear", Value: "2010/11"}, {Key: "Land", Value: 5}, {Key: "Total", Value: 105}}
countyPivot[6] = {{Key: "id", Value: 169536}, {Key: "TaxYear", Value: "2011/12"}, {Key: "Land", Value: 6}, {Key: "Total", Value: 106}}
countyPivot[7] = {{Key: "id", Value: 169537}, {Key: "TaxYear", Value: "2012/13"}, {Key: "Land", Value: 7}, {Key: "Total", Value: 107}}
This is the definition of my igGrid:
$("#grdCountyAssessment").igGrid({
width: "100%",
height: "500px", // Adjust height as needed
columns: columns,
dataSource: countyPivot,
autoGenerateColumns: false, // We're manually defining the columns
features: [
{
name: "Sorting"
},
{
name: "Paging", // Enable paging
pageSize: 10 // Set page size
}
]
});
And this is what ends up getting generated:
How do I adjust the data source so the igGrid can display the data correctly?
Any assistance is greatly appreciated.