ag-Grid provides a mechanism using the cellStyle to modify the style of a cell.
However, I want to change the color of a cell while processing nodes. I know the exact node which I want to change the color of.
Is there some way to do that?
The simplest solution would be to use a cell rendering function:
// put the value in bold
colDef.cellRenderer = function(params) {
return '<b>' + params.value.toUpperCase() + '</b>';
}
You can apply the style depending on the value of the node - this will be made available in the params argument
Use cellStyle or cellClass or cellClass in column property and return the
var colDef = {name: 'Dynamic Styles', field' 'field2', cellStyle: cellStyling}
function cellStyling(params){
if(true){
return {'background-color':''};
} else {
return {'color': '#9B9999' ,'background-color':'#E8E2E1'};
}
}
as per your comment, code can be use like--
$scope.gridOptions.api.forEachNode(function(node){
for(var j=0;j<node.gridOptionsWrapper.columnController.allDisplayedColumns.length;j++){
if(node.gridOptionsWrapper.columnController.allDisplayedColumns[j].colDef.headerName==="column Name"){
node.gridOptionsWrapper.columnController.allDisplayedColumns[j].colDef.cellStyle = {apply style};
}
}
}
Related
It looks like a simple task, but I already spent 4 hours to find a solution. How can I highlight the entire row by cell click?
On register api I have next
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope,function(selected){
if('.ui-grid-cell-focus '){
console.log("fired class")
$(selected.row.entity).addClass('ui-grid-cell-focus')
}
console.log("fired cell")
$(selected.row.entity).addClass('ui-grid-cell-focus')
});
};
I see how click on cell is fired, but I cannot force to color the row and I don't want to select the row, because I use check box selection for this purpose, I just want to highlight the row by click on any cell in this row. Could somebody tell me where my mistake is?
Attached plunker
One way to accomplish what you want is to add a cellClass definition to your columnDefs. That function takes two params: grid and row.
$scope.gridOptions.columnDefs = [{
name: 'id',
width: '150',
cellTemplate: "",
cellClass: getCellClass
}, {
name: 'name',
width: '200',
cellClass: getCellClass
} ...
];
function getCellClass(grid, row) {
return row.uid === selectedRow ? 'highlight' : '';
}
On click you could set a variable to the uid of the row, and inside the cellClass function you can check if the uid of the current row matches the uid of the selected, if so, you can set the class to a class that properly reflects the background color of the selected row.
var selectedRow = null;
gridApi.cellNav.on.navigate($scope, function(selected) {
if ('.ui-grid-cell-focus ') {
selectedRow = selected.row.uid;
gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
}
});
Here's a link to your updated plunker: http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview
If you don't like the cellClass approach you could define custom cellTemplates and similarly react to a property you set on the row entity.
I currently have a rather big Grid and am successfully using the RowExpander plugin to display complementary informations on certain rows. My problem is that it's not all rows that contain the aforementioned complementary informations and I do not wish the RowExpander to be active nor to show it's "+" icon if a particular data store's entry is empty. I tried using the conventional "renderer" property on the RowExpander object, but it did not work.
So basically, how can you have the RowExpander's icon and double click shown and activated only if a certain data store's field != ""?
Thanks in advance! =)
EDIT: I found a solution
As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:
this.rowExpander = new Ext.ux.grid.RowExpander({
tpl: ...
renderer: function(v, p, record) {
if (record.get('listeRetourChaqueJour') != "") {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
} else {
p.id = '';
return ' ';
}
},
expandOnEnter: false,
expandOnDblClick: false
});
Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expanOnDblClick since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to '' only when I'm not rendering the rowExpander, I'm also removing the gray background of the un-rendered cells. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).
That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the class I guess. Hope this can help other people stuck in the position I was!
As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:
this.rowExpander = new Ext.ux.grid.RowExpander({
tpl: ...
renderer: function(v, p, record) {
if (record.get('listeRetourChaqueJour') != "") {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
} else {
p.id = '';
return ' ';
}
},
expandOnEnter: false,
expandOnDblClick: false
});
Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expandOnDblClick specifically since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to an empty string only when I'm not rendering the rowExpander, I'm also removing the gray background of the cells that won't offer any expanding. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).
That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the RowExpander class in my opinion. Of course, one could also use Ext.override(), but then all instances of RowExpander would be hit by the override.
I have the same task, there is my solution
var rowExpander = new Ext.ux.grid.RowExpander({
renderer : function(v, p, record){
return record.get('relatedPageCount') > 0 ? '<div class="x-grid3-row-expander"> </div>' : ' ';
}
});
I have overridden render method which test relatedPageCount field in store and render + or white space.
I think I've found a cleaner solution.Give me a feedback pls :)
I extend the toggleRow method of RowExpander and if I match a condition avoid to toggle the row.Otherwise the standard flow continues
Ext.create('customplugins.grid.plugin.ClickRowExpander',{
pluginId : 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Last Modified By:</b> {usermodify}</p>',
'<p><b>User data:</b> {userdata}</p>',
'<p><b>Correlation ID:</b> {correlationid}</p>',
'<p><b>Description:</b> {descr}</p>'
),
toggleRow : function(rowIdx, record) {
if(record.get('directory')) return false;
customplugins.grid.plugin.ClickRowExpander.prototype.toggleRow.apply(this, arguments);
}
})
This version works in Ext JS 5 and 6 (classic)
One thing is to remove the +/- icon, which can be done via grid viewConfig:
getRowClass: function (record, rowIndex, rowParams, store) {
var yourFieldofChoice = record.get('yourFieldofChoice');
if (yourFieldofChoice == null) {
return 'hide-row-expander';
}
},
Define css for hide-row-expander:
.hide-row-expander .x-grid-row-expander {
visibility: hidden;
}
Now you disable expanding on enter key ('expandOnEnter' config is no longer supported in Ext JS 6) or double click by overriding toggleRow, or if you do not wish the override you create your custom rowexpander built on existing plugin:
Ext.define('RowExpander', {
extend: 'Ext.grid.plugin.RowExpander',
alias: 'plugin.myExpander',
init: function (grid) {
var me = this;
me.grid = grid;
me.callParent(arguments);
},
requiredFields: ['yourFieldofChoice'],
hasRequiredFields: function (rec) {
var valid = false;
Ext.each(this.requiredFields, function (field) {
if (!Ext.isEmpty(rec.get(field))) {
valid = true;
}
});
return valid;
},
toggleRow: function (rowIdx, record) {
var me = this, rec;
rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) {
me.callParent(arguments);
}
}
});
I have handled the beforeexpand event inside the listeners of Ext.ux.grid.RowExpander. beforeexpand method got the whole row data injected. Checking the data conditionally we can return true or false. If we return false it wont expand otherwise it will do.
var expander = new Ext.ux.grid.RowExpander({
tpl: '<div class="ux-row-expander"></div>',
listeners: {
beforeexpand : function(expander, record, body, rowIndex){
var gpdata = record.data.GROUP_VALUES[1].COLUMN_VALUE
if(gpdata == null){
return false;
}
else{
return true;
}
}
}
});
How do I add custom CSS classes to rows in a data grid (Ext.grid.Panel)?
I'm using ExtJS 4.0.
The way to do it is to define viewConfig on the grid:
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
In your initComponent() of your Ext.grid.Panel use getRowClass() as follows:
initComponent: function(){
var me = this;
me.callParent(arguments);
me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
if (/* some check here based on the input */) {
return 'myRowClass';
}
};
}
This basically overrides the getRowClass() function of the underlying Ext.grid.View which is called at render time to apply any custom classes. Then your custom css file would contain something like:
.myRowClass .x-grid-cell {background:#FF0000; }
You could do something like this:
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
Of course you could substitute the getRow() call for another cell, or you could loop through all of your rows and add it appropriately.
And then you could style that in addition to the default CSS, by doing:
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
There is also a private method of GridView called addRowClass. You can use this to add a class to your rows as well by doing:
grid.getView().addRowClass(rowId, 'myClass');
// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
var row = this.getRow(rowId);
if (row) {
this.fly(row).addClass(cls);
}
},
Use simplest way
In your grid use -
cls: 'myRowClass'
Your css -
.myRowClass .x-grid-cell {background:#FF0000 !important; }
If you want to change the class after the data has loaded, you can do it like this:
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
Here, rowIndex is the selected row, which you can get in some event functions(like "select"). By using this, you can change CSS of the row after clicking it.
I hava implemented a datagrid using dojo which get updated every 5 seconds. I use following code to update the datagrid.
jsonStore.fetch({
query: {id:'*'},
onComplete: function(items, result){
dojo.forEach(items, function(item){
jsonStore.setValue(item, "time" , data.update[0].netchange);
.....
'data' is the new data i need to set to the grid which is an json object as follows
var data = {"update":[{...}]}
what I need to do if the netchage is negative i need set cell color to red. if netchange is positive it should be green. So I need a way to change cell formatting dynamically. can some one please tell me how to this. thanks in advance
grid4 = new dojox.grid.DataGrid({
query : {
Title : '*'
},
id : "grid",
jsId : "grid",
clientSort : true,
rowSelector : '0px',
structure : layout4
}, document.createElement('div'));
grid4.setStore(jsonStore);
dojo.byId("gridContainer4").appendChild(grid4.domNode);
var layout4 = [ {
field : 'time',
name : 'time',
width : '40px',
formatter: geticon()
}, {
field : 'netchange',
name : 'netchange',
width : '30px'
} ];
Before I answer the question, just a trivial misnomer when you say, "change the cell formatting dynamically".
You aren't changing the cell formatter, you are changing how the cell is styled.
Every time a value is loaded into a cell, the formatter is called. Additionally, the onStyleROw function is called for the row that the cell is within.
This means that you have two options for changing the color of the cell. You can do it on a cell wide basis, or you can have your formatter do something simple like wrapping the value with a <span> that has a different style color. I'll show you both.
Here is the first solution without changing any of your existing grid code and it will change the entire row using onStyleRow.
Solution 1 using onStyleRow
Step 1. (Connect the onStyleRow)
dojo.connect( grid4, "onStyleRow", styleRowGridPayment );
Step 2. (Create you styleRowGridPayment method.)
var styleGridPayment = function(inRow) {
if( null !== grid4.getItem( inRow.index ) ) {
item = grid4.getItem( inRow.index );
if( item.netchange < 0 ) {
inRow.customStyles += "color:red;";
} else {
inRow.customStyles += "color:green;";
}
}
}
That should do it for using onStyleRow.
Solution 2, using the formatter
In your field declaration, you would have
{
field : 'netchange',
name : 'netchange',
width : '30px'
formatter: formatNetchange
}
Notice that I have added the formatNetchange as the formatter.
Then you just create your formatter.
formatNetchange = function(value){
if(value < 0){
color = "red";
} else {
color = "green";
}
return "<span style='color:" + color "'>" + value "</span>";
}
I have a jqGrid where I want all the rows to be in edit mode. Under certain conditions, however, I want a cell in that row to be readonly based on some condition of the row data, but I can't seem to get the grid to bend to my will (yet).
This is what I currently have.
$(grid).addRowData(...); // omitted for clarity
$(grid).jqGrid('editRow',rowid);
if (someCondition){
$(grid).setCell(rowid, 'col1', '', '', {editable: false});
}
The row is added and put into edit mode just as I want, but when it gets to the call to setCell(), it doesn't seem to affect the cell.
Any ideas what I'm doing wrong here?
The grid was already using column formatters for other columns so I decided to go that route. I couldn't get it to not change the entire column to readonly/editable using the method described by Oleg. I also decided to store readonly state as part of the grid cell value.
colModel:
{ name: 'ARNumber', width: 70, editable: false, sortable: false, formatter: 'optionalReadonlyInputCellFormatter'},
setup of my formatter/unformatter:
$.extend($.fn.fmatter, {
optionalReadonlyInputCellFormatter: formatOptionalReadonlyInputCell
});
$.extend($.fn.fmatter.optionalReadonlyInputCellFormatter, {
unformat: unformatOptionalReadonlyInputCell
});
formatter/unformatter functions:
function formatOptionalReadonlyInputCell(cellvalue, options, rowdata) {
var readonly = cellvalue === undefined;
if (readonly)
return displayARNumberInput('');
vals = cellvalue.split(",");
var cellValue = vals[0];
var readonly = !(vals[1] === undefined) || vals[1] == 1;
if (readonly) {
return displayARNumberSpan(cellValue);
}
else {
return displayARNumberInput(cellValue);
}
}
function unformatOptionalReadonlyInputCell(cellvalue, options, cellobject) {
var readonly = (cellvalue == "") ? "0" : "1";
if (readonly == "1") {
return cellvalue + "," + readonly;
}
else {
return $(cellobject).children().val() + "," + readonly;
}
}
function displayARNumberInput(value) {
var element = document.createElement("input");
element.type = "text";
element.value = value;
return element.outerHTML;
}
function displayARNumberSpan(value) {
var element = document.createElement("span");
element.innerText = value;
return element.outerHTML;
}
You should try to modify the property of the cell before you call the editRow method.
Moreover I know only editable attribute for the row which can be "1" or "0" and class "not-editable-row" also for the class. Does the editable attribute for the cell exist?
There is one way which can work. You can modify the editable attribute for the column in the colModel before the call of the editRow method and reset this to the original state after the editRow call. See jqGrid: Enable paging while converting HTML table to grid for an example how to make a dynamic modification in the colModel.
UPDATED: If you already use custom formatter, you can also include that in your code custom editing. An example you will find here Add multiple input elements in a custom edit type field. Custom formatter will be used only to display the data in the grid, but custom_element and custom_value if the row is in the editing mode.