Custom Border on first day of a week

Tags: #<Tag:0x00007f135d646e60>
#1

Hello,
I was able to add a custom class to one td at every row where date day is monday, but now I have to hook somehow into rows that have my custom class in td and set custom border to them, or set border to all td in this row, is there any hook that can do it for me?

#2

Hi @pawel

Have you tried to use setBorders method https://jsfiddle.net/nc3w52o6/ ? It is based on cell coordinates.

#3

Well for now i did something like this

function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.DateRenderer.apply(this, arguments);
var d = new Date(value);
var day = d.getDay();
if(day === 1){
var b = instance.getCellMetaAtRow(cellProperties.row);
td.className = ‘pon bord’;
$.each( b, function(a , val){
val.className = val.className + ’ bord’;
});
}
}
But problem is that I need add bord class just to last monday not all mondays, so somehow I need to take row above my row and row below my row and check values but for now I have no idea how to do it.

#4

Hey @pawel

You do not need to use a cell renderer. You can use cells method which is more efficient (especially if you have a larger table) https://jsfiddle.net/handsoncode/mc9gwvrz/

Is ‘Monday’ always in the same column or it can appear anywhere?

#5

Hi @pawel

How’s the progress?

#6

Hi
Your fiddle highlight all mondays, while I had to highlight just first one to seperate weeks in table. I am sure that there could be better fix for my problem but for now I did something like this in my custom renderer.

function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {

 Handsontable.renderers.DateRenderer.apply(this, arguments);

 var d = new Date(value);

 var day = d.getDay();

 if(day === 1){

    var b = instance.getCellMetaAtRow(cellProperties.row);

    var c = instance.getDataAtCell(cellProperties.visualRow, cellProperties.visualCol);

    var index = cellProperties.visualRow + 1;

    var d = instance.getDataAtCell(index, cellProperties.visualCol);

    if(c !== d){

    td.className = 'pon bord';

    $.each( b, function(a , val){

        val.className = val.className + ' bord';        

    }); 

}

 }

}

I am checking next day in table, if its not monday that its highlighted, table with almost 4000 records work enought fast.

1 Like
#7