How would I go about setting the background colour of an Ext JS Grid row, mainly just the selected item(s).
Any help would be greatly appreciated.
To change the selected row color you have to override the appropriate CSS class:
.x-grid3-row-selected {
background-color: red !important;
}
You could also override the default border-color if you want using that class.
The getRowClass function, on the other hand, is for adding a static CSS class to rows using business logic to determine which rows are affected. You could also achieve row coloring that way, but it would not affect highlighted row color (although you could also write CSS that used both classes together to do so).
EDIT: To change the row style programmatically you will still want to define your styles statically in CSS, then simply add/remove CSS classes dynamically as needed. E.g., assuming a grid and a button with id 'my-btn', clicking the button will add a class (could be defined just like .x-grid3-row-selected as shown above) to the first row in the grid, applying whatever style is in the CSS class. It's up to you to define your real business logic for selecting row(s), but this is the syntax:
Ext.get('my-btn').on('click', function(){
Ext.fly(myGrid.getView().getRow(0)).addClass('error');
});
#bmoeskau This thing you gave does not work with me.
I rather use
grid.getView().addRowClass(rowIndex, 'red');
inside the onDoubleClick function.
Related
I am using antd table to display the information and I want to apply the class to the particular row when I click on it.
Currently its applying the class when I move the mouse out of the row after clicking it.
please consider this Code Sandbox for the code.
the the background color of the row is changing when I move the mouse out of the row after clicking on it.
I want it change as soon as I click on it.
Also when I sort any column the background color for that column is being removed, how can I avoid that?
Any solution, reference or hint is appreciated. thank you
The background color is working as you have intended. The problem is that you are hovering on the row aswell which is changing the color. Try using a table that does not have the :hover functionality.
The problem was even after applying another class the default styles for hover are still being applied, I had to suppress the default styles for hover on a row, for that I added this style for that particular antd css class in my App.css
.ant-table-tbody > tr.ant-table-row:hover > td {
background: unset;
}
is what I did.
I'm trying to find a solution for this conditional formatting.
When the "INSTALLED" column is "YES" I wish cell "HARD DISK" turns green.
Some idea?
Thanks so much!
Example without conditional formatting:
Example with conditional formatting:
To get an idea how conditional formatting is implemented I suggest looking into assets/js/wpdatatables/wpdatatables.js
Basically it's not quite easy - that's a hint on what you would need to do:
Hook into either .draw() or .row() callback of the wpDataTables.table_1.api() object on the page (in an inline script or in a separate .js file):
Check for the value of the third column (yes/no);
Apply a CSS class for the second column based on the yes/no value (e.g. "green" or "red";
Add CSS rules for ".green" and ".red" classes - setting the background-color to red and to green.
A probable solution is to apply a row CSS rule if the value installed is yes and then a cell CSS rule if HD is not empty.
Then in CSS you could find an easy workaround.
.row-yourclass .cell-yourclass2 {
background-color: green;
}
I have a long form with many fields. Some of the fields get their data from separate DIV, where there are other more specific fields.
Every field, along with its label, is included into a separate block. To highlight the fields there is a CSS :hover for their class.
The CSS :hoveron the fields blocks works smoothly, and also the onmouseover and onmouseout over the many DIV passing data to them, using the following Javascript:
function LineOn(whichOne) {
document.getElementById(whichOne).style.backgroundColor = '#cf0';
}
function LineOff(whichOne) {
document.getElementById(whichOne).style.backgroundColor = '#fff';
}
But, after the execution of the Javascript, the hover stops to work (i.e. the block remains white), without reporting any console error or message.
This happens both with Firefox 36.0.3 and with Chrome 39.0.2171.71, running on a Slackware current release.
Is there a sort of hierarchy giving to the background color set with Javascript the priority over the one defined in the <style> section?
Yes, styles defined directly in the element's style property overrides any value set in CSS, unless that style has !important on it.
CSS specificity http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
The priority level of the selector is decided in Point of combination of selectors.
style attribute = a
number of ID attributes in the selector = b
number of other attributes and pseudo-classes in the selector = c
number of element names and pseudo-elements in the selector = d
That's one good reason not to set styles attributes; set a CSS class instead yet.
I'm realy new to css and jquery and I need help for my project.
I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.
If I click on average button, this button must get yellow color and other lose color if was clicked on him before
-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons
BUt I try to do that based on #ID's
$('#price_quality_adv').css('background-color','#C90');
$('#reliability_adv').css('background-color','#C90');
http://jsfiddle.net/EC44Z/5/
please help. sorry for my english
THANKS!
Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)
setQuality = function(qulaity, type_rating, name)
Fiddle: http://jsfiddle.net/EC44Z/8/
There are still some other issues however, the code is a little complex. It is better to do something like...
HTML
advantage
CSS
.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }
JS (jQuery)
$("#button_advantage").on('click',function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
})
Summary
The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...
HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.
CSS is for style, and all styles should be kept together there where possible.
JS is for dynamic functionality, so in this case, adding a class, so that the style changes.
My problem is I have couple of divs in my page. All have header of similar color. Now if I have to change the color(for example background color) of all divs, I have to make changes as many divs I have. Is it not possible to just change or say write the color code at one place (like in a variable) and the then use that variable as color value in the embedded styles to all those divs. Something like javascript entities.
If you need variables in CSS, you might want to look at CSS pre-compilers (is this the correct term?), such as Sass, which does this Server-side and eases the pains for having many different color repeated across multiple rulesets.
Otherwise, when developing, try splitting your CSS files into individual components, such as typography.css, color.css etc. to help better organise them. You'll still want to combine them after development is complete for better performance, but doing this does help keep things neater and tidier.
Lastly, you can always define large rules like this:
#header, #footer, #nav, #sidebar {
color: orange; /* I like orange! */
}
Which would reduce redundancy somewhat. Using Javascript for styling and presentation should only be kept as a last resort; there are always tools available to keep your CSS tidy; you only need to use them.
u can write some css and jquery to achive this
.color1
{
color:red;
background-color:green;
}
.color2
{
color:blue;
background-color:orange;
}
now on some event u can change classes. for example intitially u have
<div class="header color1">SOME TEXT HERE</div>
<div class="header color1">another header</div>
u can change this with jquery or even with javascript :)
$("#somebutton").live("click", function(){
$(".header").removeClass('color1');
$(".header").addClass('color2');
});
this will change color of both headers at click of button with id somebutton
How about setting the same class on all divs and set all common colors in there? That way you'd only have to change the color for that class.
I would suggest using jQuery or another javascript library, to do this.
Assign a class to the divs you wish to alter, and then use the following code (when giving them a clas of 'header-div')
$('.header-div').('background-color','#FF0000');
this will change ALL elements with the class of 'header-div'
Jquery solution
define all the divs with a specific class like
<div class="changeable"></div>
Then use jquery to change the background
$(".change").click(function() {
$(".changeable").css("background","#000");
});