Hi experts, is it possible to implement the "drill down" in pivot grid? I'm imaging user can click on a cell of pivot table, then I get all the dimension information of that cell, then I can do a search against my datasrouce and show user some data.
For example, http://www.igniteui.com/pivot-grid/overview, in this link, if user clicked a cell, how can I get which seller,which year/month/date of that cell user just clicked?
Hello Sathya,
There is no easy way to get all the dimension information. What you can get is cell, column header and row header values using the following cell click handler.
$("#pivotGrid").igPivotGrid("grid").element.on("iggridcellclick", function (evt, ui) {
var colHeader, rowHeader, cellValue;
colHeader = ui.owner.columnByKey(ui.colKey).headerText;
rowHeader = ui.row.find(".ui-igpivotgrid-header .ui-iggrid-headertext").text();
cellValue = $(ui.cellElement).text();
});
Hope this helps,Martin PavlovInfragistics, Inc.
Martin, thank you for your reply. I have two more questions for you. my fiddle is here, http://jsfiddle.net/zhangming870/5vy4eab6/
1. As long as I expand rows and columns, this event does not get fired?
2. I see the aggregator function has two parameters, function aggregatorFunc (items, cellMetadata), Is it possible to get dimension from cellMetadata?
Actually I have another question.. Based on your experience, what's your suggestion to do this "drill down" feature?
Take your time.
Best regards,Martin PavlovInfragistics, Inc.
I'm working on this. and will let you know shortly. Thanks!
I'm sorry but I still don't understand what is your use case here.
Anyway I don't think you need the "c" variable in your code. I used in only to make a link between the cell and the actual data related to that cell. In your case you probably need the cell value itself, but I cannot tell, because I don't know what is your grid data source schema.
Martin, you are right. My scenarios is slightly different from your example. Please go through my plan and give me suggestion if anything is wrong.
My pivot and grid does not share the same datasource/schema, so my aim is to get pivot's dimension and correspondence dimension value of this cell. So I guess I can put dimension/dimensionValue pair into data-dimensions like this:
aggregator: function (items, cellMetadata) {
var rowDimensions= $("#pivotGrid").igPivotGrid("option", "dataSource").rowAxis(); var colDimensions= $("#pivotGrid").igPivotGrid("option", "dataSource").columnAxis();
//myDimensionSeperateByUnderscore = Product_Datevar myDimensionSeperateByUnderscore = MyFancyFunction(rowDimensions,colDimensions);
arr["" + c] = items[0];
return "<span data-ix='" + c++ + " data-dimensions= "+myDimensionSeperateByUnderscore +" '>" + unitSoldSum(items, cellMetadata) + "</span>";
}
Note: arr only store the first item.
And then in iggridcellclick event, I can get acitve dimensions of pivot grid, and perform a search operation, show result in grid.
$("#pivotGrid").on("iggridcellclick", function (evt, ui) { cellValue = $(ui.cellElement).find("span").attr("data-ix");var cellDimensions = $(ui.cellElement).find("span").attr("data-dimensions");
var dimensions = MyFancyDimensionsSplitFunction(dimensions); // i get ['Product', 'Date']
for(var d in dimensions){ alert(cellValue[d]); //show every dimension value
I'm attaching a sample that demonstrates the approach described in my previous post. The sample contains igPivotGrid and igGrid. When you click on a data cell the igGrid is populated with the records that participate in the aggregated data.