I have a problem with cell style in pivot mode: all mode such as row group and simple grid work well, but when I change to pivot mode just row style works and the cell style is not working.
See the link below
https://plnkr.co/edit/8AFyzB5XvqlQg51Q
I use this code in colDef
cellStyle: {color: 'red', 'background-color': 'green'}
and getRowStyle in gridOptions
var gridOptions = {
getRowStyle : function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: 'blue' };
}
}
}
Please guide me.
well coldef in AG-grid refers a simple column but the moment you perform grouping and pivoting its no longer a simple column it becomes a groupcolumn and if its autogroupcolomn then ag grid generates it. so if you want to apply styles to row group in grouped or pivot mode then you have to define it like this.
autoGroupColumnDef: {
width: 180,
cellStyle: function(params) {
//check that the autogroup is built using country column and then color every odd cell
if(params.node.field ==='country' && params.node.rowIndex% 2 === 1){
return {color: 'red', 'background-color': 'white'}
}
}
},
check out this fiddle to see the working demo
Related
I have a jqGrid PHP project where I have been able with the below code to make rows background color and editable = false, based on the value of a cell in that row.
$rowattr = <<<ROWATTR
function (rd) {
if (rd.br_re_ending == "OTFN") {
return { "style": "background-color:#FF9999; background-image:none;", "editable": false };
}
}
ROWATTR;
$grid->setGridEvent('rowattr', $rowattr);
What I am now trying to do is to similarly use the value of a cell to determine if another cell in that same row should be editable or not. I have tried several options like the below, but with no avail.
$rowattr = <<<ROWATTR
function (rd) {
if (rd.br_ch_flag_extrameals == "STD") {
return { "setColProp", "br_ch_ch2_mon", "editable": True };
}
}
ROWATTR;
$grid->setGridEvent('rowattr', $rowattr);
Can someone please provide some help or guidance in how to achieve this?
Thanks,
Adri
I understand SharePoint lists are like excel, so I was wondering if it was possible to conditionally highlight whole rows/ cells based on the text value of a field.
I have a column in a list called "Status" with 4 options (initial, in progress, completed, awaiting developer resource). I would like to highlight these rows (or even just the status field) a different colour, depending on the value of the status.
Is this possible? Cant find anything relating to this for SP 2016
Cheers
Please use JavaScript to highlight the row based on the Status field:
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'initial' : '#FFF1AD',
'in progress' : '#FFD800',
'completed' : '#01DF3A',
'awaiting developer resource':'#ff0000'
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var status = rows[i]["Status"];
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = statusColors[status];
}
}
});
});
</script>
And place the code above in a Content Editor Web Part in the list view page, so the list row will render different color based on status:
In Chart.js I am unable to set a color for the tooltip.I want to color the label "December 2016" as same as the color of the legend (Blue).
Please see below;
graphOptions.tooltips = {
enabled: true,
mode: 'single',
displayColors: false,
callbacks: {
title: function (tooltipItem, data) {
if (tooltipItem.length > 0) {
return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans";
}
return "";
},
label: function (tooltipItem, data) {
if (data.datasets.length > 0) {
return data.datasets[tooltipItem.datasetIndex].label;
}
return '';
},
labelColor: function (tooltipItem, chartInstace) {
if (data.length > 0) {
return data[tooltipItem.datasetIndex].backgroundColor;
}
}
}
};
You haven't defined anything called data in the labelColor callback function. Another confusion with this callback in charts.js, is the second parameter passed to the labelColor callback function is the chart instance, and not the datasets like some of the other chartjs callbacks.
Anyway, this should work.
labelColor: function(tooltipItem, chart) {
var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
You might want to try with labelTextColor instead of labelColor
This is a feature available since Chartjs 2.7
https://github.com/chartjs/Chart.js/releases/tag/v2.7.0
(Feature #4199)
labelTextColor: function(tooltipItem, chart) {
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount")
{
return "#1ff368";
}
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
return "#8577ec";
}
}
just type your chart label like "amount" and then modify your colors in hand
Actually, the problem is that in labelColor callback you returning the backgroundColor. Below is the right return type of above callback method.
function (tooltipItem, chartInstance) {
return {
borderColor: borderColor,
backgroundColor: backgroundColor
};
}
In backgroungColor assign the color for the label. and you can leave the borderColor.
[Sample-Code]
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0]
};
}
Actually, if your dataset color is just an item and not an array this you shall not need an extra tooltip callback eg.
Single color intepreted as the one shown in the tooltip automatically
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// this will show the tooltip with red color
backgroundColor: '#e23944',
borderColor: 'blue'
}
instead of
Array of colors not intepreted as the one shown in the tooltip
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944'],
borderColor: ['blue']
}
According to the screenshot, you have only one dataset matching one color, so you don't need to put the colors as an array. If you need to set multiples points within the same dataset using different colors, then you shall use
Array of colors distributed to each data points
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944', '#D4E157', '#26A69A', '#758BE2'],
borderColor: ['blue', 'green', 'white', 'dark']
}
But then you shall forgot this solution ^^ and adopt the one given above ;)
PS :For border and background colors you can use hexa, rbg or string notations.
Hope it helps :)
'tooltipItem' doesn't exists, misspelling the final 's'. So, your code should be
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0]
};
}
I need to be able to set the fontFamily for an entire IText object even if it has character specific styling (code example and jsfiddle below). Note, when changing the fontFamily the character-specific styles don't change. Is there a way for me to access and clear those styles and then apply the style to the entire set of characters?
http://jsfiddle.net/xmfw65qg/48/
var iTextSample = new fabric.IText('hello\nworld', {
styles: {
0: {
0: { textDecoration: 'underline', fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
2020 May Edit
In later revisions of fabricJS, the method removeStyle(props) has been added.
That means you can do:
myTextObject.removeStyle('fontFamily');
to clean it up.
You also have:
myTextObject.cleanStyle('fontFamily');
That will instead remove all the fontaFamily properties that are duplicated of the main object. So that the style object is reduced in complexity if possible.
Original answer
http://jsfiddle.net/asturur/xmfw65qg/50/
you have to manually iterate the style object and clear the fontFamily property.
function setFont(name, value) {
var object = canvas.item(0);
if (!object) return;
if (object.styles) {
var styles = object.styles;
for (var row in styles) {
for (var char in styles[row]) {
if ('fontFamily' in styles[row][char]) {
delete styles[row][char]['fontFamily'];
}
}
}
}
object.set(name, value).setCoords();
canvas.renderAll();
}
why this is necessary is another matter.
I would open an issue on the github repository for that.
Edit:
As fabricjs released 1.6.2 a small bug that was causing the original style object to be changed during rendering, has been fixed.
Here is my problem, i have a scale of colors for different countries. When I select a country, its color change and I don't want to.
I just want to use the stroke attribute (without the fill attribute) to display selected regions.
Problem is that the default color for fill is "yellow". I tried to set the fill attribute for selected region to "none" but it erases my current color when selected.
Have you guys a way to solve this issue?
$('#worldMap').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
scale: ['#C1E712', '#5F7209'],
values: countryHitCounts,
}]
},
regionStyle: {
selected: {
fill: <= is there a keyword to not change the color when selected??
stroke: 'red',
"stroke-width": 1,
},
},
regionsSelectable: true,
selectedRegions: countrySelected,
onRegionSelected: function (event, code, isSelected, selectedRegions) {
//some code...
},
});
EDIT: in the minify js code source file, I changed the default style for selected region.
selected:{fill:"yellow"} by selected:{}
It works but if you have a better solution without changing the source file, I take it.
I ran into the same problem as well, what seemed to work for me was to override the selected fill with an invalid hex code. ex:
regionStyle: {
selected: {
fill: '#Z34FF9'
}
},
This seemed to register it as an override, but not actually apply it, leaving my original color.
You juste have to prevent the default action of the click :
,
onRegionClick: function(event, code){
event.preventDefault();
// your "some code" of region selected
}
Norrec's answer did not work for me, but I can override the class defaults just before creating the map. No source modification needed!
jvm.Map.defaultParams.regionStyle.selected = {};
map = new jvm.Map({
map: 'world_mill',
container: jQuery('#world-map'),
regionStyle: {
initial: {
fill: "#F6F6F6",
},
selected: {
stroke: '#FF00FF',
"stroke-width": 0.5,
}
},
}