Tag Archives: jQuery

jQuery UI DatePicker Scrolls to Top After Select

I have been struggling with the jQuery UI DatePicker and almost started using an alternate one. If my grid causes the page to scroll down, and I open a dialog with a DatePicker on it, after I choose the date, the window would scroll to the top. I looked over the code for the DatePicker and nowhere are they setting the scroll position.

After banging my head I noticed that the date selector was simply an anchor tag with href=”#”, which defaults to the top of the document.

In the jQuery UI code I simply replaced all of the href=”#” with javascript: function() { return false };

Advertisements

Color Sorting in jQuery jqGrid

I am developing a project management application. One of the requirements is to implement project state colors (red, yellow, green) and be able to sort by them in grids. In my case this is client sorting. To accomplish this without any custom sorting functions this is what I did.

I put the name of the color as the value of the cell. I wrapped the value in a div with a specific style using a custom formatter. The style sets the background-color and the color to the same color to hide the text, and I go an extra step and set the text-indent to -1000 and set overflow to hidden. Voila! jqGrid uses the color to sort.

Here is the example:

._pv-pstat-green
{
    color: #87D27E;
    background-color: #87D27E;
    width: 100%;
    overflow: hidden;    
    text-indent: -1000px;
}
formatter: function(cellvalue, options, rowObject) {
     return "<div class="_pv-pstat-&quot; + cellvalue.toLowerCase() + &quot;">" + cellvalue + "</div>";
}