ryansuitposungkono / openjs-grid

Automatically exported from code.google.com/p/openjs-grid
0 stars 0 forks source link

Display the columns in different color #36

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What is the expected output? What do you see instead?
Display the columns in different color depend on the cell or column values or 
condition,...?

What version of the product are you using? On what operating system?
openjs 1.8, windows 7

Please provide any additional information below.

This is how I've done it
This grid will check a date in one of the columns called EndDate and check it 
against the current time.  If the end date is less than the current time, it 
adds a class to the row, which is defined in css to make the row red.

Basically your using loadComplete and looping through the Tds of the column you 
want, checking values, and applying classes to the rows.

$(".all").loadGrid({
    inlineEditing:true,
    stickyRows:false,
    width:1100,
    adding:true,
    deleting:true,
    loadComplete : function() {
        var $grid = $(this);
        $grid.getCol("EndDate").getTdsFromTh().each(function() {
            var dateString = $(this).find(":input").val();
            var end = new Date(dateString);
            var now = new Date();
            // expired
            if(end < now) {
                $(this).parents("tr").addClass("expired");
            }           
        });
    }
});

i used this code it doesn't show any difference to the grid.. when i print the 
now and end ... only now date is printed ,,,, end date showing invalid date....

??? whether we should create a new css...if so how to do it...?

Original issue reported on code.google.com by saravana...@gmail.com on 27 Oct 2011 at 9:21

GoogleCodeExporter commented 9 years ago
My example was for my specific case. Doing this colorizing is a little bit 
custom. The concept though is this

1) when the grid is finished loading
2) get all the TDs from a specific column
2a) Loop through the TDs
3) use some row data from the $grid.data().rowData object to determine the color
4) apply the color to the current TD

Original comment by Seancla...@gmail.com on 16 Nov 2011 at 5:39