Question

I am loading a jqgrid with approximately 38 columns of data. The first 6 column was frozen and other column was unfrozen (It is a date & month depends on the combo box. please see the sample image here ). When the data is finished loading the jqgrid, I would like to automatically scroll the jqgrid to a specific column in the current day of the month next to the last column of the columns that was frozen. The scroll will depend on the current day (ex: if today is July 26,2012 it would automatically scroll to that specififc day and so on).

And the other is when that day has received data that cell will blink into red and green (those cell that has a data or value will blink into two colors), something like that.

Is anyone has an idea how to do this?
Thanks! . Please see here the sample image of the layout.

Answer 1

I use this function to scroll to current Date column

function scrollToCurrentDate(currentDate,jqGrid){
    var width =0 ;
    var frozenWidth = 0;
    for(var i =0,col;col=jqGrid[0].p.colModel[i];i++){
        width += $("#"+jqGrid[0].id+"_"+col.name)[0].offsetWidth;
        if(col.name.indexOf('Qty')==0){
            var day = col.name.replace('Qty','');
            var date = $("#CurrentYear").val()+'-'+$("#CurrentMonth").val()+'-'+(parseInt(day)<10?"0"+day:day);

            if(currentDate == date){  
                var columnWidth = $("#"+jqGrid[0].id+"_"+col.name)[0].offsetWidth;
                $(".ui-jqgrid-hdiv").scrollLeft((width-columnWidth)-frozenWidth);
                $(".ui-jqgrid-bdiv").scrollLeft((width-columnWidth)-frozenWidth);
                break;
            }
        }
        else{
          frozenWidth += $("#"+jqGrid[0].id+"_"+col.name)[0].offsetWidth;    
        }
    }
}

And then I call this function in gridComplete:

scrollToCurrentDate(currentDate,$("#table"));

And in the Blink effect here’s the code.

var blinkStatus=false;
var blink = function(){
        //$(".blinker").toggle();
        $(".txtBlinker").css("background-color", blinkStatus?"#CFC":"#FF4F4F");
        blinkStatus=!blinkStatus;
    };
    $(document).ready(function() {

        setInterval(blink, 1000);
    });