ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: jeremy on August 22, 2016, 02:01:59 am

Title: How to Implement AutoSave and nested tables?
Post by: jeremy on August 22, 2016, 02:01:59 am

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..

Title: Re: How to Implement AutoSave and nested tables?
Post by: jeremy on August 22, 2016, 10:26:43 am

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

Title: Re: How to Implement AutoSave and nested tables?
Post by: paramvir on August 22, 2016, 03:06:14 pm

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.

Title: Re: How to Implement AutoSave and nested tables?
Post by: jeremy on August 23, 2016, 01:12:55 am

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.

Title: Re: How to Implement AutoSave and nested tables?
Post by: jeremy on August 23, 2016, 06:27:50 am

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.

Title: Re: How to Implement AutoSave and nested tables?
Post by: jeremy on August 23, 2016, 08:46:05 am

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

Title: Re: How to Implement AutoSave and nested tables?
Post by: paramvir on August 23, 2016, 09:18:18 am

Quote

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

Add postRenderInterval: -1 to the grid initialization options.

Quote

  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/

Title: Re: How to Implement AutoSave and nested tables?
Post by: jeremy on August 23, 2016, 09:22:30 am

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