I am trying to add customized styling to every second row in my AgGrid.
I am using the following snippet of code in my onGridReady:
gridOptions.getRowStyle = function (params) {
if (params.node.rowIndex % 2 === 0) {
return { background: "#f0f1f4" };
};
The issue I am having is I would like to add a variation indicating whether the row is selected or not. Currently the style remains the same either way.
What should I add to my code to achieve this?
Thank you in advance for reading and responding.
AgGrid exposes multiple class names of each row elements to describe its current state (ag-row, ag-row-odd, ag-row-selected...). You can take advantage of that information to override the row style if it's currently selected like below:
.ag-theme-alpine .ag-row.ag-row-odd {
background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
background-color: red;
}
Live Demo
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
What happens if I create two class or id with the same name but different property, which one will execute and why ?
I think in this case the class created first will give priority.
I just want to know.
Here's an example to show you:
html {
background-color: blue;
}
html {
background-color: red;
}
html {
background-color: lime;
}
<html></html>
As you can see, the last duplicate rule defined is the one that is applied.
I think it is more likely to be the second one, because generally computers will go by what value was assigned to a class or variable last. For example:
var num = 1;
var num = 2;
alert(num);
//will alert “2”
I designed a site so that changing two user inputted colors should change the color scheme of the entire site.
What is the best way to accomplish this. I know that I would have to save the items in the database and pull every time the user logged in in order to implement the color scheme with every login.
But at the moment I am more worried about a live change as soon as the user changes the html color value.
I know of an option to where I add a CSS class to every component that would change such as ... .primaryColor and .secondaryColor. And then alter all of the elements with that class. Is there a better way with React or another CSS/Javascript solution?
Also another complication is that it would have to be in a way that when the user loads other components that have not rendered yet, the change is still in affect.
One possible solution is to use the <style> element coupled with dangerouslySetInnerHTML, like this. (Notice the backticks ` around the CSS - it's an interpolated string literal.)
const Theme = props => {
<style dangerouslySetInnerHTML={{__html: `
.styled { color: ${props.userColor} }
`}}
/>
}
Then a component that used the theme would simply be <div className="styled" />
I got the idea for this solution here.
If you use this method, be very careful you're using sanitized variables to create your CSS theme. Otherwise, there's potential problems with injection attacks.
I would use an event listener on the input, read the value, and if it matches whatever you want to trigger the color scheme change, apply the theme value to a data attribute on a root element and use CSS to control the color schemes.
var input = document.getElementById('input'),
body = document.getElementsByTagName('body')[0];
input.addEventListener('keyup',function() {
var val = this.value;
if (this.value == 'foo') {
body.setAttribute('data-theme','secondary');
} else if (this.value == 'bar') {
body.setAttribute('data-theme','primary');
} else {
body.setAttribute('data-theme','');
}
// ajax request to save theme pref in db
})
/* defaults */
body {
color: #333;
}
/* primary theme */
[data-theme="primary"] {
color: red;
}
[data-theme="primary"] p {
background: yellow;
}
/* secondary theme */
[data-theme="secondary"] {
color: blue;
}
[data-theme="secondary"] ul {
background: grey;
}
<input id="input" placeholder="enter 'foo' or 'bar'">
<p>
paragraph
</p>
<ul>
<li>list</li>
</ul>
you can easily do this using js.
just add your class .primaryColor, .secondaryColor with jQuery addClass() Method.
select the element
example :
$(selector).addClass(classname,function(index,currentclass))
more example :https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass
Is there any way to display the page-length option and paginate option in the same line? This is how I got:
Is there any way to override their css and display them in the same line? They both are in two separate div. I've added "jquery.dataTables.min.css" and "bootstrap.min.css".
Use dom option to construct the layout for Bootstrap framework.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-8'p>>"
});
See this jsFiddle for code and demonstration
edit: Ah, I realized I can't reply to a comments in comment, I hope the OP can sees this.
simply add the character i for information
as example, if you want to have i after l, then put as below
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'li><'col-sm-8'p>>"
});
else you can even let i have it's own col-sm, as follows (note that I decreases pagination, p from 8 to 4 in order to fit into 12 division of 'row' by bootstrap standard.
var table = $('#example').DataTable({
dom: "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'l><'col-sm-4'i><'col-sm-4'p>>"
});
on bootstrap 4 I overide by
"language": {
"sProcessing": "กำลังดำเนินการ...",
"sLengthMenu": "แสดง_MENU_ แถว",
"sZeroRecords": "ไม่พบข้อมูล",
"sInfo": "แสดง START ถึง END จาก TOTAL แถว",
"sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว",
"sInfoFiltered": "(กรองข้อมูล MAX ทุกแถว)",
"sInfoPostFix": "",
"sSearch": "ค้นหา:",
"sUrl": "",
"oPaginate": {
"sFirst": "เิริ่มต้น",
"sPrevious": "ก่อนหน้า",
"sNext": "ถัดไป",
"sLast": "สุดท้าย"
}
},
Just override Datatable CSS class .dataTables_wrapper .dataTables_length by adding new property as per below.
.dataTables_wrapper .dataTables_length {
white-space: nowrap;
}
In my case i've tried to achieve length,info and paginate at the bottom of the table. You can see the result below.
To achieve this, first you should set dom property of your DataTable.
dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>"
After that put and customize the code below for your own needs, in your CSS file or between the <style> tags.
div.dataTables_wrapper div.dataTables_info {
padding-top: 1.7em;
}
div.dataTables_wrapper div.dataTables_length {
padding-top: 0.3em;
}
This solved my problem. But in case you need to style other properties of datatable, you are free to use the selectors below.
div.dataTables_wrapper div.dataTables_filter {
padding-top: 0.8em;
}
div.dataTables_wrapper div.dataTables_paginate {
padding-top: 0.8em;
}