Is it possible to style an entire row in a Blazorise datagrid conditionally?
for example, if Active == false, I want to gray out an entire row, using css
.inactive {
text-color: gray;
}
I tried to use the RowStyling attribute but I am not sure how to use that (or if it can be used at all). If it can be used, I would like to pass the current TItem to the function. I can set the style at the row level () and use CSS to set global row colors.
Yes you can use RowStyling parameter. Example:
<DataGrid ...
RowStyling="#OnRowStyling"
private void OnRowStyling(Employee employee, DataGridRowStyling styling)
{
if (!employee.IsActive)
styling.Class = "inactive";
}
Change Employee with your own model.
Related
How can I set the background colour for an item within an if statement in typescript? I used querySelector but the answer can use anything to achieve the result.
The selector is (.mat-step:nth-child(2) .mat-step-header .mat-step-icon-selected).
Here is the code in a stackblitz.
I would appreciate any help!
The stackblitz example can be helpful but there is a lot in there to summarise what you are askign for, this answer is a generic way of doing so, meaning you can apply it to your code as and where you see fit.
Declare you boolean.
public value = true;
Now declare the CSS class you would like to use.
.exmaple-class {
background: red;
}
Then on the selected HTML element you want to apply the class.
<div [class.example-class]="value === true"></div>
or just
<div [class.example-class]="value"></div>
As this still equates to true. If value were set to false then the class would not be applied.
If you want to start building more classes and options for a specific element you can look into Angular's ngStyle.
Add in this, think this is what you are also asking for, little different. It only runs after the view is loaded, not working in you example because the HTML has not yet been drawn.
public ngAfterViewInit(): void
{
this.changeColour();
}
public changeColour() {
document.querySelector<HTMLInputElement>(".mat-step-icon-selected").style.backgroundColor = 'red';
}
}
Then add a click event to ensure that each time you select something the selector is updated.
<div class="center-contrainer" (click)=changeColour()>
I have an ExtJs grid, whose 1st row is used as temporary row. In the grid certain columns are non-editable. I want to show non-editable cells of first row(temporary) as non-editable. As that temporary row does not have any values so how to show those cells as non-editable (like greying out that cell only)
As selected in the image, I want to show those cells as greyed out
Obviously this will be achieved by applying a CSS rule to those elements. To target the column we will be using the tdCls column config.
A CSS class names to apply to the table cells for this column.
To target the row, usually the getRowClass method is used, but in this this particular case I think this will be an overkill, because it will be called on every row of the grid, we just need a class for the first row. So I think the way to go is by adding the class to the first row on view's viewready event.
That being said, here is how the solution could look. Add a tdCls for the needed columns:
{
text: 'Serial',
dataIndex: 'serial',
tdCls: 'serial-column',
width: 200
}
Add a class to the first row:
viewConfig: {
listeners: {
viewready: function (view) {
Ext.get(view.getNode(0)).addCls('first-row');
}
}
}
Then just apply the needed styling via CSS:
.first-row .serial-column {
background: #ccc;
}
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26aq
P.S.
This is a really good tutorial about styling ExtJS grid cells: http://skirtlesden.com/articles/styling-extjs-grid-cells
I'm looking into custom CSS properties and have come up with the code below.
If I put the CSS inline using a STYLE attribute on the canvas tag (like this: style="--rgLinewidth: 3" ) then I can get the custom CSS values using the script shown below.
But using a tag, as below, then it doesn't show the custom CSS properties.
Is it possible to? And if so how?
<html>
<head>
<style>
canvas#cvs {
--rgLinewidth: 3;
background-color: red;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
styles = window.getComputedStyle(canvas);
alert(styles.getPropertyValue('background-color'));
alert(styles.getPropertyValue('--rgLinewidth'));
for (var i=0; i<styles.length; i++) {
if (canvas.style[i].indexOf('--rg') === 0) {
var value = styles.getPropertyValue(canvas.style[i]);
alert([canvas.style[i], value]);
}
}
</script>
</body>
</html>
It does not work because you query for computed style and then attempt to retrieve values of corresponding properties from the inline style, where they do not exist -- your canvas does not define an inline style. You need to query the values through the same styles object where you find the properties.
Consider the following function which when passed an element, will search through its computed style and return the value of the first CSS variable whose name starts with --rg:
function find_first_rg_value(el) {
var styles = getComputedStyle(el);
for (var i = 0; i < styles.length; i++) {
if (styles[i].startsWith('--rg')) {
return styles.getPropertyValue(styles[i]);
}
}
}
(Use like find_first_rg_value(canvas))
The difference between my approach and yours is, as I said, that you attempt to fetch the value from canvas.style[i], but canvas.style is effectively empty. Use styles instead.
Computed style (getComputedStyle), as the name implies, contains "summary" style computed per CSS cascading, inheriting, and so on, with inline style, if any, applied on top (overriding priority). Assigning inline style therefore affects the computed style, but querying inline style only gives you inline style you assigned, no more.
This means that in most cases like yours one would want to use getComputedStyle. Additionally, since CSS variables cannot be queried using style.fontName syntax, you need to use getPropertyValue function for these (all dashes intact in the passed property name), regardless if you are dealing with an inline or computed style object.
I have a TableView and I am trying to make it so that when I click on a row, all of the rows above will change their style (turn gray). I created a custom TableCell, and its updateItem method is shown below. The .row-to-ignore CSS class has a few !important properties.
On each updateItem, I check whether the row index is above or below a certain threshold, and then either apply or remove a style class.
Everything works fine until I scroll; when I scroll up, everything gets the style applied to like it should. However, when I scroll down, random lines have the style applied, and others don't.
The odd thing is that if I apply the style using setStyle(), everything works correctly.
Custom Table Cell snippet:
#Override protected void updateItem(String cellItem, boolean empty) {
super.updateItem(cellItem, empty);
if (cellItem != null) {
setText(cellItem);
// Apply styling depending on whether the row is selected as not-data.
if ((this.getTableRow().getIndex()) < mHighlightIndex)
{
// Apply "ignore" styling.
this.getStyleClass().add("row-to-ignore");
} else {
// Remove ignore styling.
this.getStyleClass().remove(".row-to-ignore");
}
} else {
setText("");
}
}
CSS file:
.row-to-ignore {
-fx-background-color: #e3e4e9 !important;
-fx-text-fill: #b8b8b8 !important;
}
I found my answer in this post. It turns out that I was adding multiple copies of the class to the list with the style class. Removing all of the copies of the class made the issue go away.
I changed this:
// Apply "ignore" styling.
this.getStyleClass().add("row-to-ignore");
to this:
// Apply "ignore" styling. Make sure not to add duplicate copies of class to style list.
if (!this.getStyleClass().contains("row-to-ignore")) {
this.getStyleClass().add("row-to-ignore");
}
I'm trying mightily to style my GWT 2.4 DataGrid, and hit roadblocks at every turn. I've added the following row styling to my DataGrid:
dataTable.setRowStyles(new RowStyles<IntegrityItem>() {
#Override
public String getStyleNames(IntegrityItem row, int rowIndex) {
if (row.getSomeValue() >= 100) {
return MyResources.INSTANCE.mystyles().alertRow();
} else {
return "";
}
}
});
The style alertRow is simply this:
.alertEntry {
font-weight: bold;
color: #00ff00;
background-color: #ff0000;
}
More information: I've made a local copy of DataGrid.css and removed ALL "background" elements from all the styles, and I've used this to construct a ClientBundle:
public interface MyDataGridResources extends DataGrid.Resources {
public static final FmeaDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);
#Override
#Source({"../resources/styling/mydatagridstyles.css"})
Style dataGridStyle();
}
I've used this (MyDataGridResources.INSTANCE) in my DataGrid constructor.
When I try it out, the rows that meet the criteria contained green (#00ff00) text, but the background colour remains white or grey depending on whether it is an even row or an odd row. How is it that background-color is ignored the way it is? Where is it getting those colors in the first place?! I've removed background color information from the css file completely.
You can create a custom CSS file and provide this to the DataGrid through defining a new style resource. This is done by creating a type that extends DataGrid.Resources, which knows about your CSS file. You then pass this to the constructor of the datagrid.
To provide a fairly complete example, first create a new type for the DataGrid style. (Defining a new type like this just uniquely identifies your style within GWT).
public interface MyStyle extends DataGrid.Style {
}
Then, define an interface which overrides the dataGridStyle() method stub in DataGrid.Resources. The dataGridStyle method should return the previously defined MyStyle.
Note the two elements given to the #Source annotation - you can just override any of the class names in the default CSS (DataGrid.css) in the second file you provide ("DataGridOverride.css" here).
public interface DataGridResource extends DataGrid.Resources {
#Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" })
MyStyle dataGridStyle();
};
To construct your newly-styled datagrid all you need to do is:
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)
One subtlety is as you're increasing the precedence of the overridden styles, you may need to override any other styles that require higher precedence, for example the row hover rules need to come after the row styling rules.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3 (which is not a bug!)
In short extend the DataGrid.Style (the goal is only to have a new type, you don't have to add anything to it) and have your dataGridStyle overridden method return your own subtype rather than DataGrid.Style (and it'll work because of return-type covariance)