Slickgrid - How to add css at grid creation time?
Tags: javascript,css,slickgrid
Problem :
I'm using SlickGrid v2.1 and I would like to add a css class to my grid's row, during it's creation time, based on a data source value. For example, given the code below:
var data = [];
var columns = [
{id: "title", name: "Title", field: "title", width: 120},
{id: "duration", name: "Duration", field: "duration"}
]
... [data initialization] ...
grid = new Slick.Grid("#myGrid", data, columns, options);
I want to add a css class, "test", to a row if it's duration cell value is equal to 99. How can one do this? I've tried to do this by adding custom formatter to the duration column but I cant access the grid's canvas methods.
I've searched the web regarding this matter but didnt find any help. Any help would be much appreciated!
Best regards
Solution :
I ended up getting the correct way to do this. One has got to implement getItemMetadata as explained here: https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid.
The code:
function getItemMetadata(row){
if(data[row].duration === 99){
return { 'cssClasses': 'test' }
}
}
Best regards
CSS Howto..
function triggerCarousal(){ setTimeout(function() { //Add a timer (Show for 5 seconds) featuredCounselorCarousel(); }, 5000) } function featuredCounselorCarousel() { hideCurrentCounselor(); showCurrentCounselor(); //Show the Counselor First }// End featuredCounselorCarousel function showCurrentCounselor()...
use insert class to change the css of div <!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 100px; background-color: yellow; animation: rotate 5s 1; /* transform: rotate;*/ }...
Create admin panel where a user can enter in their style settings. Write your php code to take the data from that form, and save it to where ever...
.first_one { margin-left: auto; margin-right: auto; text-align: center; } .second_one { width: 100%; } Then in your view, for the first one you would do <div class = "first_one"> ......
Your current animation keyframes: @-webkit-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left:...
Lower the opacity. <table class="grayout"> ... </table> .grayout { opacity: 0.6; /* Real browsers */ filter: alpha(opacity = 60); /* MSIE */ } ...
One of the tricky things in modern web design is to create a two (or more) column layout where all the columns are of equal height. I set out on...
Looks like this line: <link rel="stylesheet" href="${cherrypy.url('/asset/css/bootstrap.css')}" media="screen" /> is conflicting with the combined bootstrap file coming from the cdn: <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> Just remove the...
Try this: Create your Custom Elements with Error Alert, Success Alert, etc... /View/Elements/error_alert.ctp <!-- Example Bootstrap Error Alert --> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong><?php echo $message...
Maybe you want to set height of outer element in which you place the table instead?
Try the nth-childselector: .fieldSetDropDown:nth-child(1) { left:40% } .fieldSetDropDown:nth-child(2) { left:50% } .fieldSetDropDown:nth-child(3) { left:60% } BTW: You have a typo in your HTML: "classs" must be "class"...
it's the ui-state-focus class: .ui-autocomplete .ui-menu-item:hover, .ui-autocomplete .ui-menu-item.ui-state-focus{ background-color: #2ea2cc !important; background-image: none; color: #fff; border: none; } ...
Use CSS3 box-shadow property. Example: input[type=text] { box-shadow: inset 2px 2px 2px 2px black; } ...