I want a grid with only two columns, one is for name and the other for percentage. The very last row will have 'Total' as the name and the total percent as 'percentage'. This row only will be styled differently than the other rows. Please guide me how can i accomplish this.
Thanks..
There is a grid feature to accomplish exactly that. It is covered here in the docs with some examples of how to use it.
You can also customize the style by providing your own implementation of the x-grid-row-summary class in your css.
EDIT
Here's some examples of setting the summary row style, as you can see there are a few ways to go about it. Realize that the summary row can't be referenced until the viewready event occurs, it is not ready at the afterrender event, so I put all this logic in a viewready listener:
Ext.create('Ext.grid.Panel', {
features: [{
ftype: 'summary'
}],
// other grid configs ...
listeners: {
viewready: function(grid) {
// get reference to the summary row
var summaryRow = grid.view.el.down('tr.x-grid-row-summary');
// this will apply a css class to the row, in this example,
// I am applying the extjs grid header style to my summary row
summaryRow.addCls('x-grid-header-ct');
// or, to do it all in javascript as you mentioned in the comment
// first you would create a style object, I took these style
// properties from the .x-grid-header-ct
aStyleObject = {
cursor: 'default',
zoom: 1,
padding: 0,
border: '1px solid #d0d0d0',
'border-bottom-color': '#c5c5c5',
'background-image': 'none',
'background-color': '#c5c5c5'
}
// then you pass the style object using setStyle
summaryRow.setStyle(aStyleObject);
// or you could set the style for each cell individually using
// addCls or setStyle:
Ext.Array.each(summaryRow.query('td'), function(td) {
var cell = Ext.get(td);
cell.addCls('some-class');
// or
cell.setStyle(anotherStyleObject);
});
}
}
});
if we have summary row (like this), simply we can use CSS on specific page.
<style>
.x-grid-row-summary .x-grid-cell{
background-color: #f00 !important;
font-size: x-large !important;
}
Related
I have setup my table in Tabulator with responsiveLayout:"collapse" and responsiveLayoutCollapseStartOpen:false.
My table display properly with collapsed columns.
I added formatter:"responsiveCollapse" as column and I properly get the column with + and - icons and can manually expand/collapse the columns.
But for usability on a smartphone, the icon renders really a bit small.
I want to add to expand/collapse based on callback rowClick.
I found responsiveCollapse and toggleList in tabulator.js, so I think I know what needs to happen. However I am totally struggling how to return it out of rowClick.
Thank you very much for a hint in advance.
In the tabulator constructor I have:
columns:[
{ formatter:"responsiveCollapse", width:30, minWidth:30,
hozAlign:"center", resizable:false, headerSort:false, responsive:0 },
{ title:"Ren.", field:"Race_Number", sorter:"number",
hozAlign:"center", minWidth:60, widthGrow:1, responsive:0 },
]
And basically I want to achieve the some functionality as formatter:"responsiveCollapse" in rowClick:
rowClick:function(e, id, data, row){
//trigger an alert message when the row is clicked
//what to do here to achieve same as formatter:"responsiveCollapse"
},
You could copy some of the code from the built-in responsiveCollapse formatter to achieve this. It will involve accessing some private variables, which is a bit naughty, but it will do the job:
rowClick:function(e, id, data, row){
var config = cell.getRow()._row.modules.responsiveLayout; //get the responsive config object for the row
var collapseEl = config.element; //get the collapsible element for the row
if(collapseEl){ //check if the row has any collapsed data
config.open = !config.open; toggle the open state
//toggle the collapse element
if(config.open){
el.classList.add("open");
collapseEl.style.display = '';
}else{
el.classList.remove("open");
collapseEl.style.display = 'none';
}
}
}
this was very helpful, remember to comment out "toggle the open state" and also update
el.classList.remove("open");
to
collapseEl.classList.remove("open");
I want to mark cells who has been edited so the user can see which cells have been touched and altered. I know there is a cell flash option, but that just changes the background colors for a bit. What I want is a background color change when an edit has been done.
Cannot seem to find any specific documentation on accessing for example the html element or the styling of affected cell.
Anyone got any ideas?
You can use ColDef.onCellValueChanged to detect if something changes and update the cell style accordingly using GridApi.refreshCells()
const columnDefs = [{
headerName: "Athlete",
field: "athlete",
onCellValueChanged: this.markAsDirty
},...]
...
private markAsDirty(params: ICellRendererParams) {
params.colDef.cellClass = (p) =>
p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";
params.api.refreshCells({
columns: [params.column.getId()],
rowNodes: [params.node],
force: true // without this line, the cell style is not refreshed at the first time
});
}
In your css file
:host ::ng-deep .ag-cell-dirty {
background-color: rgba(255, 193, 7, 0.5) !important;
}
You may also want to use defaultColDef if you want this behavior applied to all columns
this.gridOptions = {
defaultColDef: {
editable: true,
onCellValueChanged: this.markAsDirty
},
};
Live Demo
I did this on a project I was working on.
There is a cellClass property that you can define in your column definitions (https://www.ag-grid.com/javascript-grid-cell-styles/) and it can take a callback function with params: CellClassParams.
So try doing:
cellClass: (params: CellClassParams) => {
// you need to have a handle on the original untouched data
// See if the original value does not equal the modified value in params
// For shortness, I will write pseudocode
if (originalValue !== modifiedValue) {
return 'ag-cell-was-modified';
}
}
If many columns are editable, you may want to use a re-usable function for cellClass for each column.
That should apply the class ag-cell-was-modified conditionally whether the cell was modified or not and in your style.scss or main stylesheet, you can add:
.ag-cell-was-modified {
background: red;
}
Of course, if you are using SASS, you can place this class definition in somewhere more appropriate.
I want to disable a datatable row. In such case I see two required steps:
set CSS
prevent selection
I've successfully done the first step with corresponding Webix methods:
function disableRow(table, row){
table.addRowCss(row, "disabled-row")
};
webix.ui({
view:"datatable",
id:"mytest",
...
});
disableRow($$("mytest"), 2)
http://webix.com/snippet/e47b4257
But how can I restrict the selection of this row? Thank you
I found the answer you are looking for here
There's no disabled property for rows, but you can use onBeforeSelect and onBeforeEditStart events to prevent related actions on the particular row:
There is a link to this snippet on the above linked page which does what you are looking for.
webix.ui({
view:"datatable", autoConfig:true, editable:true, data:grid_data,
on:{
onBeforeEditStart:function(id){
if (id.row == 2 ) return false
},
onBeforeSelect:function(id){
if (id.row == 2 ) return false
}
}
});
It seems like there might not be a built in way to disable a row. I did come across this snippet that might help
I've tried programatically selecting the row afterwards and it won't let you.
webix.ui({
view:"datatable", id:"abc",autoConfig:true, editable:true, data:grid_data,
on:{
onBeforeEditStart:function(id){
if (id.row == 2 ) return false
},
onBeforeSelect:function(id){
if (id.row == 2 ) return false
}
}
});
$$("abc").select(2);
alert($$("abc").getSelectedId())
$$("abc").select(3);
alert($$("abc").getSelectedId())
Use !important to override the table styles:
<style>
.disabled-row {
background-color: #ddd !important;
color: #aaa !important;
}
</style>
http://webix.com/snippet/1a3569c6
To disable any feature provided by webix, you can override its events and handle the same:
like to stop the selection on any particular column, row or cell you can override onBeforeSelect and return false for that specific row/column/cell.
There are events for everything i.e onBeforeSelect,onAfterSelect,onBeforeEditStop, onAfterEditStop etc.
I have a colors.less file that maintains consistent color palette for a site.
I also have a chart.js file that requires hard coded colors to display chart elements in appropriate colors.
How can I make the chart colors dependent on the generated colors.css file?
So far I've been maintaining two color palettes, one in less and another in js. How can I merge the two?
Example:
/* colors.less */
#green: #46a546;
#red: #9d261d;
#yellow: #f1c40f;
and
/* chart.js */
var chartElements = {
"apples": {
label: "Apples",
color: "#46a546",
},
"oranges": {
label: "Oranges",
color: "#f1c40f",
},
"grapes": {
label: "Grapes",
color: "#9d261d",
}...
How can I stop maintaining both sets of colors?
Even tho Pointy's answer may fit better here (talking about LESS), I want to remind that you can access stylesheet data directly via ECMAscript. You might be able to identify a specific rule and just grab the value. Might look like
[].forEach.call(document.styleSheets, function( set ) {
if( set.href && set.href.indexOf( 'dialog.css' ) > -1 ) {
[].forEach.call( set.cssRules, function( rule ) {
if( rule.selectorText === 'div#dialog-container-left' ) {
// to whatever here, grab the value and store it for global application usage
console.log( rule.style.backgroundColor );
}
});
}
});
Having that exact problem, I "solved" it with the following hack.
The CSS includes a list of "swatch-nn" classes (swatch-1, swatch-2, and so on). Those get the pre-defined LESS constants as their background color. (For me, a simple numerically-ordered list works; other situations might call for other approaches.)
My SPA wrapper creates a (hidden) list of elements that have the swatch classes.
<div id=swatches>
<div class=swatch-1>
<div class=swatch-2>
<!-- etc -->
</div>
Some JavaScript code at application startup populates a globally-available list of colors from the swatches.
var swatches = {}, $swatchContainer = $("#swatches"), rname = /\bswatch-(.*)\b/;
$swatchContainer.children("div").each(function() {
var swatch = this;
this.className.replace(rname, function(_, label) {
swatches[label] = $(swatch).css("backgroundColor");
});
})
$.swatches = swatches;
My Chart.js code thus copies the color values out of that global array. It's crude but it works fine.
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.