Miscellaneous notes and thoughts

While working on integrating an instance of SlickGrid into a project file today, I discovered that all the rows had white backgrounds. In all the examples, the rows alternate colors for easier reading.  It took a while, but I traced the problem down to a conflict in the CSS for .ui-widget-content .  After adding the following to a .css file that loads at the end of the queue, my SlickGrid now has alternating gray and white rows as needed:

.ui-widget-content.slick-row.odd
    {
    background-color:white;   
    }
.ui-widget-content.slick-row.even
    {
    background-color:rgb(250,250,250);   
    }

The current problem I am working on is the inconsistent alignment and width of SlickGrid headers and their associated data cells. It is similar to the problem shown here: http://stackoverflow.com/questions/8559487/slick-grid-header-row-cell-alignment

Update 12:20

What appears to be happening is that the column width is set, for example, to 50. However, the elements added for the sortable and resizable properties add width to the header (about 10 pixels), but not to the cell.

Strangely, it very always becomes properly aligned if I hold down the shift key and refresh the page, even though no changes are made to code or CSS between page loads.

If I set the resizable and sortable properties to false, then everything consistently aligns properly on every page load/refresh.

Update 16:05 

I have spent much of today researching this error, with little advancement.  I tried to rebuild and reproduce the problem in jsfiddle.net, but it aligned properly there.  I tend to think that the cause is related to browser rendering and CSS caching or interpretation. It has been tested on Mac and Windows in Firefox, Chrome and IE. The misalignment is not consistent or predictable.  In Firefox, if I first use Chris Pederick's Web Developer toolbar to clear the cache, the SlickGrid always loads with proper alignment.

So far I am impressed by the capabilities of SlickGrid. My current project has so many jQuery plugins, other modules and CSS files there are bound to be conflicts.

Update 18:50

I haven't been able to consistently reproduce the problem discussed above, so I have moved on. I am now working on retrieving data from the database via jQuery ajax. In the past I have always written my own ajax functions, but have decided to go with jQuery for this project since its requirements may eventually grow beyond the simple tools I have previously built.

So far, the method has been very simple. I need the ajax to be called when a user clicks on a row in the SlickGrid.  In the grid's setup JS, I added:

grid.onClick.subscribe(function(e, args) {
        var cell = grid.getCellFromEvent(e);
        var rowClicked=cell.row;
        var clickedItem = gridData[rowClicked].id;

        var request = $.ajax({
              url: "myScript.php",
              type: "POST",
              data: {id : clickedItem},
              dataType: "html"
            });

            request.done(function(msg) {
              alert(msg);
              });

            request.fail(function(jqXHR, textStatus) {
              alert( "Request failed: " + textStatus );
            });
        });

Now I need to write PHP code to retrieve the specified record from the database, convert the data into JSON and send it back in order to populate the form for editing.