Record level editing using "popup form"

As promised, I present you the same demo using V2

Version 2 (Commercial)
http://sudhaker.gotdns.com/awdemo-struts/employee.do?version=2

Version 1 (GPL) updated
http://sudhaker.gotdns.com/awdemo-struts/employee.do?version=1

Things (features) to watch for:

* Nicely integrated with ActiveWidgets with plenty of event hooks.
* Add / Change / Delete is performed using AJAX call followed by grid reload using JSON.
* You can even edit columns that are not displayed in the grid.
* Grid is disabled while in edit mode. (v2 - IE only)
* Grid is showing loading screen while doing AJAX. (v2 - IE only)
* You can drag pop-up form using title. (v2 - IE only)
* Utility classes and taglib support for AJAX / JSON.

You can easily get generated HTML and JavaScript/CSS using "view source".

Someone interested in java/struts code but can't wait till formal release, please email me.

Thanks,
Sudhaker Raj
http://sudhaker.com

Update: Popup form drag using title is working on FireFox also (for both versions).

The code works fine (on FF) if I call it on grid obj (not prototype) but mask layer shows below grid. Alex, any idea why my code is failing on FF?

Patch

/* start mask and loading */
if (AW.ie) { // had to do, as failing on FF
  
  My.RE.Mask = AW.System.Template.subclass();
  My.RE.Mask.create = function () {
    var obj = this.prototype;
    obj.setTag("span");
    obj.setClass("grid", "mask");
  };
  
  AW.UI.Grid.prototype.setContent("mask", new My.RE.Mask); // fails
  
  My.RE.Loading = AW.System.Template.subclass();
  My.RE.Loading.create = function () {
    var obj = this.prototype;
    obj.setTag("span");
    obj.setClass("grid", "loading");
  };
  AW.UI.Grid.prototype.setContent("loading", new My.RE.Loading); // fails
}

AW.UI.Grid.prototype.onMaskShow = function() {
  this.getContent("mask") && this.getContent("mask").setStyle("display", "block");
};
AW.UI.Grid.prototype.onMaskHide = function() {
  this.getContent("mask") && this.getContent("mask").setStyle("display", "none");
};

AW.UI.Grid.prototype.onLoadStart = function() {
  this.getContent("loading") && this.getContent("loading").setStyle("display", "block");
};
AW.UI.Grid.prototype.onLoadOver = function() {
  this.getContent("loading") && this.getContent("loading").setStyle("display", "none");
};

CSS

.aw-grid-mask {background-color: #eee; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);
    z-index: 10000; display: none; position: absolute; height: 100%; width: 100%;
}
.aw-grid-loading {background-color: #eee; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);
    z-index: 10000; display: none; position: absolute; height: 100%; width: 100%;
    background-image: url('loading.gif'); background-position: center center; background-repeat: no-repeat; 
}

And code to activate mask/loading

obj.action('maskShow');
obj.action('maskHide');
obj.action('loadStart');
obj.action('loadOver');

Cheers,
Sudhaker

Sudhaker, I am using a modified version of your great "mask" enh. (using js) but without any css , and seems to work fine in FF.
I'll post a test sample for checking, hope it helps.
Thanks

Hi Sudhaker,
I'm interested to see how it's working, your post seems very interesting, but I can't open demo pages it says that files are missing now. Is there some other place where they can be seen?

Thanks in advance!

All the best,
Ivan

I re-installed my linux, and demo is gone. I'll update the thread once it is back.

Thanks,

Thank you very much!

All the best,
Ivan

Carlos, by any chance did you copy the JS from the demo? I had HDD failure in my laptop and I lost the project source /// anyone?? Please email me - sudhaker _at_ yahoo _dot_ com

Thanks,