Loading Saved State On "create" Event

[tailchaser]

Greetings,

Is there a way to load the saved state of a grid automatically when loaded? The use case here is a user saving the state of the grid, visiting other pages, coming back, and the grid should load up that saved state. I reviewed the demo, but you have to click a button to load saved state. This needs to be done without a user having to click something. 

I cannot figure out how to do this. I try to put it int he "create" event handler, but I get " "unable to get property 'length' of undefined or null reference.

Code: [Select]

create:function (evt, ui) {
    $(this).pqGrid('loadState');
}

It seems to me that the "create" event is not really the last event of initializing and loading a grid.....or at least it is firing before all grid creation processes completely finish. The API says, "Triggered after the pqGrid is created."

I have run into this when trying to do something only after the grid is truly completed. I think there needs to be a "complete" event so that the grid is truly fully initialized and data is loaded so that you can invoke any grid method. As it is now, I know of no way to "wait" for everything to finish/complete before invoking something grid related as in "loadState". If there is a way, I'm all ears and would love to be enlightened as to how. :-)

Regards,
Steve

[tailchaser]

I did some additional testing to trace the firing of "refresh" and "create" events. I found the following:

1. In simple, basic grids loading local data, "create" is the last event fired.

2. When loading remote data, one "refresh" event fires after "create" event.

3. When using "flex: { one: true }", "refresh" events fire after "create" event (actually, it appears to fire after the remote data "refresh" event).

So, when using all three steps above, this is what fires in my test environment:

1. refresh
2. create
3. load remote data
4. refresh
5. refresh

Here is where it gets even more interesting. :-)

If I wait until the third and final refresh, I can successfully invoke the "loadState" function which works like a charm:

Code: [Select]

//global variable
var refreshCount = 0;

//inside grid initialization
refresh: function( event, ui ) {
    refreshCount++;
    if(refreshCount == 3) {
        $(this).pqGrid('loadState');
    }
}

So, here is the event sequence with that in place:

1. refresh
2. create
3. load remote data
4. refresh
5. refresh
6. loadState (from code above)
7. load remote data
8. refresh

So, in summary, it would be great to have a "final" or "complete" event that fires after the grid fully completes and loads all data. Also, it appears that "load state" causes the remote data process to be triggered again? If that is correct, then there could be some performance issues for larger datasets....or data queries that require some extra processing time on the server side. In our application, such server side processes could include opening a few connections to servers/databases to obtain the data and can take up to several seconds. So, you see my concern. :-)

Regards,
Steve

[paramvir]

These are good and relevant points, a complete event ( when data binding and view refresh are complete ) can be added for convenience but again it's important to understand the individual events depending upon use case.

1) If it's required to update the data e.g., computed columns, load event is more relevant. If the columns are computed in complete event, then it would be required to update the view again -> performance concern ( however little ).

2) If it's required to call flex(), the view should be ready by then hence we used the below code in your previous question.

grid.on( 'load', function( evt, ui ){
  grid.one( 'refresh', function( evt, ui ){
       //call flex.     
  });
});

When flex: { one: true } is used as option or flex() method is called, it causes a refresh of view hence another refresh event is fired.

When loadState() is called, it calls refreshDataAndView() by default and refreshDataAndView() causes remote data reload which can be prevented by passing refresh parameter as false. But then view has to be manually refreshed if grid data binding and view is already complete.

So the ideal solution to load the saved state of a grid automatically without causing extra request to server:

Code: [Select]

create: function(evt, ui){
this.loadState( { refresh: false }); //for v3.2.0
},

Please let know if you need further assistance on this.

[tailchaser]

That makes sense, but with the evaluation version being 3.1, your solutions don't work for me. :-)

You say to use

Code: [Select]

this.loadState( { refresh: false }); in the create event, it errors. I have tried

Code: [Select]

create:function( event, gridModels) {
     $(this).pqGrid('loadState', false);

It errors as well with a null reference. Removing the boolean variable results in the same thing.

Can you provide code sample that will do this in 3.1? I need to be able to show this as 100% working before we can proceed with license purchase and I have this week to make a final decision. And, btw, I appreciate the support you have provided so far in our evaluation. :-)

Regards,
Steve

[paramvir]

Please check this jsfiddle created with v3.1.0 and for local data: http://jsfiddle.net/amsxhztw/

the below code works fine:

Code: [Select]

create: function(){               
                $(this).pqGrid( 'loadState' );
            },

Please share a jsfiddle or attachment if you are still facing issues.

[tailchaser]

I created a jsFiddle which closely emulates my code which produces the error "Unable to get property 'length' of undefined or null reference" when trying to load state:

http://jsfiddle.net/ydo9mobc/3/

Run it with developer tools (IE or Chrome) open to see the error.

Thanks,
Steve

[paramvir]

Thanks for taking time to share a jsfiddle.

The error can be get rid of by adding data property to the dataModel.

Working jsfiddle without error:

http://jsfiddle.net/6gxjb0hv/

[tailchaser]

That is awesome!! Thanks again!  Hopefully this will help somebody else in the future.

I'll be making my recommendation this week to the big boss for approval. You have been most helpful which is greatly appreciated.

I do have one future request though to add a "complete" event the fires once all processing and loading is complete including all of the refreshes. We have some need for this so as to initiate other processes once the grid is loaded. I'll request this in the other part of the forum.

I'm looking forward to working with it.

Best regards,
Steve