Saturday, July 23, 2011

Flexigrid table becomes read only when no rows returned from server - solution

Flexigrid is a popular jQuery plugin which builds multipurpose data grid in web pages. It is a light weight plugin with rich controls. I have used Flexigrid heavily in my project. While using the plugin I faced one problem. It disables the grid when there are no rows in it. This looks like a proper behavior until you need the buttons in the table (Add) to be enabled for the first row to be added.

To clarify the requirement I had, there is a grid with Add and Delete buttons in it. The first row in the grid will be added through the add button. So, when the table loads for the first time, there is no row and this makes the grid read only. Now, we can not click the add button. It becomes a recursive problem.

The Flexigrid code that does this -

//add block
g.block.className = 'gBlock';
var gh = $(g.bDiv).height();
var gtop = g.bDiv.offsetTop;
$(g.block).css(
{
   width: g.bDiv.style.width,
   height: gh,
   background: 'white',
   position: 'relative',
   marginBottom: (gh * -1),
   zIndex: 1,
   top: gtop,
   left: '0px'
});
$(g.block).fadeTo(0,p.blockOpacity);

I have devised a dirty fix for this problem -

// unblock flexigrid
$("div .gBlock").css("zIndex", 0);
 

Use this code in your document.ready() function.
I tried asking the problem in the Flexigrid mailing list also, but could not get any other solution. So, currently this is the only working solution available. Try it out.