Hello Madani,

From what I see this is a scenario for igPivotGrid. The igPivotGrid has a functionality to bind to flat data source. For example please see the "Binding to Flat Data Source" sample.

Coloring of the cells can be achieved by binding to igGrid.rowsRendering event and manipulating its column collection where there are options(format, formatter, columnCssClass) for formatting the cell values.

I'm attaching a sample demonstrating your scenario.

Hope this helps,
Martin Pavlov
Infragistics, Inc.

On your first question. You can handle the igGrid.events.cellClick event and show a dialog to collect the feedback from the user. The "cellClick" event also provides you with the ui.colIndex and ui.rowIndex params which you can use for the igGrid.methods.cellAt API. Here is an example code:

$("#pivotGrid").on("iggridcellclick", function (evt, ui) {
var val = prompt("Enter your comment, please");
if (val) {
ui.owner.cellAt(ui.colIndex, ui.rowIndex).style.backgroundColor = "blue";
}
});

On your second question. You can enabled the igGrid Selection feature from the igPivotGrid.options.gridOptions.features object like this:

gridOptions :
{
features: [
{
name: "Selection",
mode: "cell",
multipleSelection: true
}
]
}

Then if you want to get the selected cells at runtime you should use the igGridSelection.methods.selectedCells method like this:

$($("#pivotGrid").igPivotGrid("grid").element).igGridSelection("selectedCells");

I modified your sample with the above code.

Best regards,
Martin Pavlov
Infragistics, Inc.