How can I add color to the rows based on the group of column values using Ag Grid in Angular? - angular8

I have a requirement to add colors to the rows based on group of column values as shown below in the screenshot using AG Grid in Angular. I do not want to use row group feature here. I want to add a color for the value Test1 and different color for value Test2. The values can be dynamic. How can I achieve it?
I am using Ag grid Version 22.

If I understood correctly then you want to color the row based on the value present in column2 of your grid. For that you can do something like:
gridOptions.rowClassRules: {
'green': 'data.Column2 == "Test1"',
'amber': 'data.Column2 == "Test2"',
'red': 'data.Column2 == "Test3"'
}
gridOptions.getRowClass = getRowClass;
}
function getRowClass(params){
switch(params.data.Column2){
case 'Test1':
return 'green1';
case 'Test2':
return 'green2';
case 'Test3':
return 'green3';
case 'Test4':
return 'red';
..
..
default:
return '';
}
}

Related

Create a column dropdown in EPPlus

I have everything else worked out but I want to put a drop down on a cell (range of cells) so that users are forced to select from the list.
I've tried this:
var dd = worksheet.Cells[5, 3, row, 3].DataValidation.AddListDataValidation() as ExcelDataValidationList;
dd.AllowBlank = true;
//Add list here
But I can't find any method or property that allows me to link the list.
How is this done? I can't find any documentation on it.
The correct way is to use the Formula.Values.Add:
dd = worksheet.Cells[5, 4, row, 4].DataValidation.AddListDataValidation() as ExcelDataValidationList;
dd.AllowBlank = true;
dd.Formula.Values.Add("Yes");
dd.Formula.Values.Add("No");

DataTables Need to get value from cell in current row to use in another cell

In DataTables, I'm using the following function:
"createdCell": function (td, cellData, rowData, row, col) {
var row_student = XXXXXXXXX
$(td).attr('id', row_student);
}
This is cell 10. I need the value from cell 9 (which will be row_student). So, how do I get the value from cell 9, in the current row?
Just needed to make the var line:
var student_row = rowData[col-1];

how to use lodash filter function using variable

I am using lodash in one of my projects to achieve filter. My requirement is we have different SELECT options that are generated dynamically. And these are populated with json.
So my filter function that I need should be generic. For example if there are 3 drop downs.
dropdown1. populated with values whose json_property is ABC_CODE="002"
dropdown2. populated with values whose json_property is xyz_CODE="002"
dropdown2 values should change based on dropdown1 selection
I have a masterdata list, which tells this information.
The loadash _.filter function should use varaibles. Because this filter should be used dynamically for different select options.
ex:
var a=_.filter($scope.masterData, function(e){
return _.indexOf(v, e.ABC_CODE) != -1;
});
console.log(a); //returns array of objects
I get the values.
How can I replace ABC_CODE from a javascript variable. like e.tempVar where tempVar is ABC_CODE
use bracket notation
var a = _.filter($scope.masterData, function(e) {
var key = ABC_CODE;
return _.indexOf(v, e[key]) != -1;
});
console.log(a); //returns array of objects

Disable or enable edit for selective cell in dojox data grid

How to disable or enable edit for selective cell in dojox data grid i.e
Imagine I have two columns (A, B) in a data grid. I want column value of B to be editable based on the value of column A. I have seen one solution in stack overflow which was specific to a DOJO version. I would like to know if there are APIs by which we can achieve above objective.
My preferred method is to override the
canEdit: function(inCell, inRowIndex)
method of the DataGrid. From that, you can get the item:
this.getItem(inRowIndex)
then work out if it should be editable or not, and return true/false.
This does override the editable flag on the column though, so you'll need to do something with that if needed.
There is no API as such. I also had similar requirement recently and here is how I implemented it:
1) Initially the column B is editable because I made it so in the Fields section of grid
2) Use onRowClick to capture the rendering of rows. Something like this should do
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
msname = this.store.getValue(item, "msname");
if(msname != null &U& (trim(msname) == trim(offsetName))) {
dojox.grid.cells._Base.prototype.format(idx, item);
}
});
The following method then disallows inline editing of required column. We are passing row index and column index to this following function:
dojox.grid.cells._Base.prototype.format = function(inRowIndex, inItem){
var f, i=grid.edit.info, d=this.get ? this.get(inRowIndex, inItem) : (this.value || this.defaultValue);
d = (d && d.replace && grid.escapeHTMLInData) ? d.replace(/&/g, '&').replace(/</g, '<') : d;
//Check inRowIndex and inItem to determine whether to be editable for this row here.
if(this.editable && (this.alwaysEditing || (i.rowIndex==inRowIndex && i.cell==this))){
return this.formatEditing(d, inRowIndex);
}else{
return this._defaultFormat(d, [d, inRowIndex, this]);
}
}
Hope that helps. Probably you can add a jsfiddle and we can try fixing it.

if clause using image in datagridviewimagecolumn

Is it possible to set IF case using the images present in the datagridviewimagecolumn?
Example:
If current row image = "Red.png"... show error msg
If current row image = "Green.png"... Insert to database
Thank You!
You can achieve this in this fashion
Need to assign a Text to identify the image you are displaying in the DataGridViewImageCell, while adding the image just set the description for the cell
(dataGridView1[2, 2] as DataGridViewImageCell).Description = "Red";// Or Green
Then when you loop through just check for the description of the imagecell and do your stuff
foreach (DataGridViewRow row in dataGridView1.Rows)
{
if(row.Cells[2] is DataGridViewImageCell)
{
if((row.Cells[2] as DataGridViewImageCell).Description == "Red")
{ // your stuff}
}
}