Hi there,
I am trying to include igPivot and related functions into one of my projects. For further usage, I need an unique ID for each cell of a pivot. I am using a flat file source and I have found a key so far. But the syntax "Axis0_0_0_false" doesn't mean anything to me. I would need an identifier consisting of the dimension name and value. For example if I have countries (US, UK, Total) as rows and status (A, B, C) as columns with a measure "sales", the unique cell identifier could be something like
[Country:US, Status:A, Measure:Sales]
or
[Country:Total, Status:C, Measure:Sales]
Is there a way to include this as ID of the TD-Tags?
Thanks and best regards
Florian
Hello Florian,
Thank you for posting in our forum.
This id :”Axis0_0_0_false” is the id of the header elements and the first row elements that can be expanded to display more data .
In general you could loop trough the rows of the grid:
var grid=$("#pivotGrid").igPivotGrid("grid");
var rows=grid.rows();
That will return an array will all row elements (<tr>).
In the tr the first element will be the cell that defines the dimension of the row.
You could also get the header row and based on the index of the cell check to which header cell it’s related to.
You can also get the element that contains the Measure and get its related title.
The function would look similar to this:
function SetCellIDs()
{
//get the measure element and get its title.
var mesure=$("#pivotGrid_measures").find("li").attr("title");
//loop in the rows
for (var i = 0; i < rows.length; i++) {
var row=rows[i];
// get the dimention for the row axis
var dimentionYRow=$(row).find("th").attr("title");
//get the header row cells.
var headerRowCells=$("tr[data-header-row]").find("th");
//get the name of the row dimension from the header row
var dimensionYName=$(headerRowCells[0]).find("li").attr("title");
//get all cells in the current row
var cells=$(row).find("td");
//loop in the cells
for (var j = 0; j < cells.length; j++) {
var cell=cells[j];
//based on the index of the cell get the related header cell element title. This will correspond to the Column dimension.
var dimensionXColumn=$(headerRowCells[j+1]).attr("title");
//get the name of the column dimension's title
var dimensionXName=$("#pivotGrid_columns").find("li").attr("title");
//build the id you want based on the collected data
var id=dimensionXName+":"+dimensionXName+", "+dimensionYName+":"+dimentionYRow+", "+"Measure:"+mesure;
//set the id for each cell.
$(cell).attr("id",id);
}
The method can be called when the pivot is rendered. For example the pivotGridRendered event:
pivotGridRendered: function(evt, ui) {
SetCellIDs();
I’ve attached an example with the code in a similar scenario to the one you’ve described.
Let me know if you have any questions or concerns regarding this.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://www.infragistics.com/support
Thanks,
Your code works fine so far. I had do make a little change as the column name appeared also for the value. But after changing this it works for me. I will test more complex scenarios later.
best regards
Hello Florian
I’m glad to hear the code worked for you.
If you have any additional questions or concerns please let me know.
Hi Maya,
I extended my example to use totals on both dimensions. Since then, I receive broken cell IDs like this
Status:undefined, undefined,US, Measure:Sales
Can you help me on this?
In this case the issue is caused by the fact that when additional hierarchies are added, the structure of the header row changes and a different selector is required to access it. I am attaching an updated version of Maya's sample for your reference:
function SetCellIDs() { var grid=$("#pivotGrid").igPivotGrid("grid"); var rows=grid.rows(); //get the measure element and get its title. var mesure=$("#pivotGrid_measures").find("li").attr("title"); //loop in the rows for (var i = 0; i < rows.length; i++) { var row=rows[i]; // get the dimention for the row axis var dimentionYRow=$(row).find("th").attr("title"); //get the header row cells. var headerRowCells=$("tr[data-header-row]").find("th"); //get the name of the row dimension from the header row var dimensionYName=$(headerRowCells[0]).find("li").attr("title"); //when aggregation is done on multiple dimensions the DOM structure of the header row changes if (dimensionYName === undefined) { headerRowCells=$("tr[data-mch-level]").find("th"); dimensionYName=$(headerRowCells[0]).find("li").attr("title"); } //get all cells in the current row var cells=$(row).find("td"); //loop in the cells for (var j = 0; j < cells.length; j++) { var cell=cells[j]; //based on the index of the cell get the related header cell element title. This will correspond to the Column dimension. var dimensionXColumn=$(headerRowCells[j+1]).attr("title"); //get the name of the column dimension's title var dimensionXName=$("#pivotGrid_columns").find("li").attr("title"); //build the id you want based on the collected data var id=dimensionXName+":"+dimensionXName+", "+dimensionYName+":"+dimentionYRow+", "+"Measure:"+mesure; //set the id for each cell. $(cell).attr("id",id); } }
Hope this helps. Please do not hesitate to contact me with any questions or updates.