I started a new project in slickgrid.
I am working this sample.
How can I change the background color of the row I want ?
For example : first row backcolor to red , second row backcolor to blue ...
Thanks for your help.
If you always want your first row red, your second row blue etc then define it in css using the nth-of-type selector and the .slick-row class selector:
/*Colour the first row red*/
.slick-row:nth-of-type(1){
background: #FF0000;
}
/*Colour the second row blue*/
.slick-row:nth-of-type(2){
background: #0000FF;
}
Related
How can I change the background color of every second column using interactive report.
First of all I recommend using css. If you don't like CSS just go directly to IR section in my answer
CSS
th:nth-child(even),
td:nth-child(even){
background-color: red !important
}
or
th:nth-child(2),
td:nth-child(2) {
background-color: red !important
}
th:nth-child(4),
td:nth-child(4) {
background-color: blue !important
}
or
th#C152380905075548116,
td[headers="C152380905075548116"] {
background-color: red !important;
}
th#C152381026269548117,
td[headers="C152381026269548117"] {
background-color: blue !important;
}
where C152380905075548116 and C152381026269548117 are columns id that should be replaced.
IR
If you really need to use native IR functionalities you should follow 3 steps:
Change report SQL query so the column contains name of the color you want to use as background
eg:
select
...
VALUE1||'<span style="display: none">red</red>' as Artikl
VALUE2||'<span style="display: none">blue</red>' as "Broj gresaka"
..
from
..
Add IR highlights Actions > Format > Highlight
Name = Red background (Artikl)
Sequence = Sequence
Enabled = Yes
Highlight Type = Cell
Background Color = #FF7755
Text Color = null
Column = Artikl
Operator = Contains
Expression = red
and
Name = Blue background (Broj gresaka)
Sequence = Sequence
Enabled = Yes
Highlight Type = Cell
Background Color = #99CCFF
Text Color = null
Column = Artikl
Operator = Contains
Expression = blue
Set columns attribute Security > Escape special characters to No
It is not the perfect solution but it works :-)
I try to change the row height of the table with css
http://jsfiddle.net/aep5bo3r/1/
I added this to change the row height.
#basic_example td
{
height: 15px!important;
line-height: 15px!important;
font-size: 10px;
}
The rows height is smaller, but now the scroll is .. jumpy?
With the default row height the cells are added nicely when scrolling, but if the rows are smaller, it won't add new rows until you scrolled past a certain portion.
I guess the javascript part doesn't like the new change.
If you can help me solve this, having smaller row height with an working scroll, it would be nice.
Thanks;
If I understand well so your problem will be solved if we add renderAllRows: true to your settings option when creating Handsontable object.
var hot = new Handsontable($('#tableContainerId')[0], {
...
renderAllRows: true,
...
});
When I click on a row within a TableView the row will be highlighted blue. How is it possible to disable this feature?
I've already tried to set the background to white, but the problem is that the row-color isn't white in every row.
Does anybody know what to do?
best regards
EDIT:
In the image below you see the blue color of the second row. This highlighting should be removed.
If you really want to do this (I agree with #kleopatra in the comments that it would make life difficult for the user) you can revert the colors for selected rows with an external css file:
.table-row-cell:filled:selected {
-fx-background: -fx-control-inner-background ;
-fx-background-color: -fx-table-cell-border-color, -fx-background ;
-fx-background-insets: 0, 0 0 1 0 ;
-fx-table-cell-border-color: derive(-fx-color, 5%);
}
.table-row-cell:odd:filled:selected {
-fx-background: -fx-control-inner-background-alt ;
}
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
Is it possible to comply all these requirements ?
the height of the grid shall be fixed whatever the number of records;
the right space after the last columns shall be never displayed;
if the number of records is greater than the height of the grid then a vertical scrollbar shall be displayed;
an horizontal scrollbar shall be never displayed;
when possible, the height could be adapted in order to not have an "half" displayed record in the bottom of the grid.
with scroll = true
... and whatever the number of grids on screen OUF !
PS: Oleg has surely the answer ...
Add this to your stylesheet:
.ui-jqgrid .ui-jqgrid-bdiv thead,div,tbody{
position: relative;
margin: 0em;
padding:0;
/*overflow: auto;*/
overflow-x:hidden;
overflow-y:auto;
text-align:left;
}
As parameters to jqgrid add:
scrollOffset: 0,