Tony,

I finally found where it indirectly says these files are required for buttons in the documentation.

First, there's the Navigating page, which says:

To use this feature we need to enable form editing. For more information refer to Installation.

Then Installation says:

• grid.formedit.js

I can't get a custom button added either. When I try, a dialog box shows up below the grid that says:

Warning
Please, select row

The dialog box is not draggable, not closeable, but it indicates both (move cursor and close button). There's also a JS error. Here it is from Firebug:

jQuery(a).jqDrag is not a function http://localhost:1598/MyData/jqGrid/js/min/grid.common-min.js Line 6

Stack Trace:
DnRModal(“#alertmod”, “#alerthd”)grid.com…on-min.js (line 6)
searchGrid()()grid.for…it-min.js (line 6)
init()(Object 0=table#gridMasterASSESS.scroll length=1, function(), undefined)jquery-1.3.min.js (line 12)
init()(function(), undefined)jquery-1.3.min.js (line 12)
searchGrid()(“#gridPagerASSESS”, Object edit=true editicon=row_edit.gif add=true, undefined, undefined, undefined, undefined)grid.for…it-min.js (line 6)
receiveColumnModel(Object)MyDataFile.js (line 127)
onComplete()ScriptRe…=475b88c8 (line 5492)
(?)()()ScriptRe…=475b88c8 (line 2399)
Sys$Net$WebRequest$completed(Object)ScriptRe…=475b88c8 (line 5103)
(?)()()ScriptRe…=475b88c8 (line 4721)
[Break on this error] var showModal=function(a){a.w.show()};va…ace(/</g,"<").replace(/"/g,""")}

Could this be a timing issue between the grid doing all its initialization tasks and the first data request (since I'm using function datatype instead of json)?

I experimented with using table-layout: auto, but the way the HTML is designed, the header and pager can't be resized with the grid. As Tony said, there is also a lot of CSS and inline style that are meant for fixed-width columns that you have to combat to try auto sizing.

It's going to take an HTML/CSS redesign to be able to do either auto or fixed. As far as HTML, the main point would be to wrap the header, grid, and pager in a table element. That would make the header and pager automatically size up to the grid size (since it's a div element), provided the width styling is left off those elements. Tables are annoying to work with, but are still the most straightforward way to do that.

The auto-sized grid could disable the drag handles and resizing in the first iteration. However, there could be a case for doing resizing on an auto-sized table. This could be accomplished by using the .offsetHeight and .offsetWidth javascript properties. These properties apparently work in all modern browsers. I tested them to work on at least DIV and TD elements in Chrome, Firefox 3, and IE 7.

I think there is some combination of HTML that could be used both ways, for auto and fixed sizing. The fixed sizing should just require extra CSS.