How to Implement AutoSave and nested tables?

[jeremy]

I have a jsfiddle here.
http://jsfiddle.net/jeremy_b/mLt4xyLk/1/

My problem is that I can't get the auto-save function to trigger on changes to the detailModel table(s).

Thanks..

[jeremy]

Subject should be How to Implement Auto Save and Row Detail.

[paramvir]

Your jsfiddle code is taken from batch editing, so I've updated it for batch editing example for you.

http://jsfiddle.net/mLt4xyLk/3/

Couple of things to note:

1. Avoid global variables especially with nested/ row details.
2. Pass grid instance to common shared functions like saveChanges.
3. Take grid instance from context of events, callbacks.
4. Enable trackModel for detailModel too.

Hope it helps.

[jeremy]

lol, I took a jsfiddle I found in the forums that was close enough to what I needed and modified it..

I took your suggestions and came up with this:
http://jsfiddle.net/jeremy_b/mLt4xyLk/4/

From the main grid all I care about are, add a row, delete a row, auto save name and expand somehow..
On the detail grid all I care about is auto updating when a checkbox is checked.

In my revised code auto-update works except when delete is pressed saveChanges isn't called.

Also wondering is there a better way to present this information..
eg: when you click on a row the column "Secret Names" it automatically expands and when you click on another row it collapses while the next row expands.

[jeremy]

Or perhaps something like this? (Doesn't work functional how I want but visually sort of)
http://jsfiddle.net/jeremy_b/mLt4xyLk/6/

Basically a single row, and in that single row there are check boxes for different options to enable..
Fields I want to be able to modify are
Name & Active..

If it's not asking too much I'd love to be able to add another "Name" with all blank Actives.

[jeremy]

Okay... I think I got it perfect with regular nested grids:

http://jsfiddle.net/jeremy_b/mLt4xyLk/7/

only problem is postRender doesn't fire for the delete button so delete doesn't work.
it would be cool if I could collapse the previous row, but it's not mission critical.

Thanks for the advice

[paramvir]

  only problem is postRender doesn't fire for the delete button so delete doesn't work.

Add postRenderInterval: -1 to the grid initialization options.

  it would be cool if I could collapse the previous row, but it's not mission critical.

Add this code in beforeRowExpand event to collapse other rows.

Code: [Select]

beforeRowExpand: function(evt, ui){
              var data = this.option('dataModel.data');
              for(var i=0, len = data.length; i< len; i++){
              var detail = data[i].pq_detail;
                if(detail && detail.show){
                detail.show = false;
                }               
              }
              this.refresh();
            },

http://jsfiddle.net/mLt4xyLk/8/

[jeremy]

Awesome, it works.. thank you for your assistance. :-)