Multiple Grid scenario - Not deleting data from the grid while closing the popup

[afterhours2]

Hi,

ParamQuery version: v8.5

I am facing issue deleting the grid data when I close the pop-up. To further elaborate,

I am working on two Grids: Grid A and Grid B. Grid A loads data when the webpage opens. Grid A has radio button. On each rowselect of Grid A, Grid B is updated by making a backend Java call to Fetch data

Data in Grid B is shown in form of pop-up window

Requirement:
==========
I want data from Grid B to be deleted when I close the pop-up and when I click on a different Radio button on Grid A, only the data related to that particular record should be displayed on Grid B

Issue:
========
1) When I close the pop-up of Grid B, the data is not getting deleted, and when I select a different radio button from Grid A and open the Grid B pop-up, both old and new data is displayed.

2) Pagination details is not reset to zero. Example: If I scrolled down to 5 pages, and now when I select a different radio button, pagination details is not reset to default

I used the below code when i close the pop-up

$("#grid_popup").pqGrid("destroy")

Below is Jsp code:

   <div title="Grid in Dialog" id="popup" style="overflow:hidden;">
      <div id="grid_popup"></div>
   </div>

Any help would be much appreciated.

Please find the attached code samples for reference

[paramvir]

It's simple.

you are supposed to call pqIS.init() to clear the loaded data and reset page request to 0 in gridB.

and call gridB.refreshDataAndView() to reload new data in gridB.

[afterhours2]

Thanks param, I updated the grid B as below

Close pop-up section- made below changes: added 2 lines, removed 1 line
=====================
pqIS.init();
pqIS.requestPage = 0;
// $("#grid_popup").pqGrid("destroy");

Open pop-up section: added "refreshDataAndView"
====================
$("#grid_popup").pqGrid("refreshDataAndView");               
         

pop-up section after updating the code:
========================================

 $("#transHistoryBtnworkovertime").button().click(function (evt) {
            $("#popup")           
            .dialog({
                height: 460,
                width: 900,
                modal: true,
               
                open: function (evt, ui) {   
                   
                   $("#grid_popup").pqGrid(obj);
                   $("#grid_popup").pqGrid("refreshDataAndView");
                },
                close: function () {
                   
                   pqIS.init();
                   pqIS.requestPage = 0;
                },
                show: {
                    effect: "highlight",
                    duration: 100
                }
            }).prev(".ui-dialog-titlebar").css({"background":"#006f66","height":"17px","font-size":"12px","vertical-align":"center"});
        }



As expected, I see only new data on the pop-up Grid B

However I see few issues, The first time I click on any new radio button, Grid B works perfectly fine. During subsequent calls,

Issue 1: For Example, If I scroll down to 5 to 10 pages and close pop-up Grid B, the next time when I try to open Grid B with a different record, it makes 2 backend calls to fetch 2 pages instead of 1

Issue 2: Row number column is missing. But I can see row number column when the page loads and I open pop-up for the first time

Issue 3:  For some reason, it reached the Error block when I open the pop-up and I see the error message displayed on the screen(But data is getting refreshed)
   
    error: function (jqXHR, textStatus, errorThrown) {
               $("#workovertimeResult").text("Failed to Reload Data, Please Try again").css("color", "red");
       }
      
      
I think all of these are connected to 1 issue. Please let me know if I missed anything or did incorrectly   

Attached Updated Grid B code   

[paramvir]

Please update your dialog code:

Code: [Select]

                open: function (evt, ui) {                   
                $("#grid_popup").pqGrid(obj);
                },
                close: function () {               
                $("#grid_popup").pqGrid( 'destroy' );
                pqIS.init();
                },


[afterhours2]

Hi,

Your Second Solution:
   

Code: [Select]

open: function (evt, ui) {                   
                $("#grid_popup").pqGrid(obj);
         },
         close: function () {               
            $("#grid_popup").pqGrid( 'destroy' );
            pqIS.init();
         },
The above code in your previous comment is not working. When grid makes backend call, I see reset page request (requestpage) as 1 instead of 0 (The pagination request in the backend Java call). Looks like "destroy" command is not working in this case.

Moreover, I am not getting data on the grid, instead I am getting below Exception on the browser console (I am getting data on Grid B only during the first call, on subsequent calls I am getting the below Exception).

   pqgrid.dev.js:26887 Uncaught TypeError: Cannot read properties of undefined (reading 'pq_hidden')
      at pqgrid.dev.js:26887:17
      at Array.findIndex (<anonymous>)
      at pq.cRenderBody.init (pqgrid.dev.js:26886:27)
      at $.paramquery.cRefresh.refresh (pqgrid.dev.js:8307:18)
      at fn.refresh (pqgrid.dev.js:4290:17)
      at fn.refreshView (pqgrid.dev.js:4299:
      at fn._onDataAvailable (pqgrid.dev.js:9222:
      at Object.callback (pqgrid.dev.js:4347:11)
      at fn.onRemoteSuccess (pqgrid.dev.js:4183:9)
      at Object.success (pqgrid.dev.js:4140:10)
      
      
Your First solution:
   "you are supposed to call pqIS.init() to clear the loaded data and reset page request to 0 in gridB.
   and call gridB.refreshDataAndView() to reload new data in gridB."
   
   This solution was kind of working, It was able to fetch and update data on every change, but problem here was that it makes 2 backend calls everytime when I open Grid B (When I open Grid B, the first time it makes 2 calls, on page scroll it makes only 1 call)

[paramvir]

When grid makes backend call, I see reset page request (requestpage) as 1 instead of 0

Code: [Select]

var pqIS = {
            totalRecords: 0,
            pending: true,
            rpp: 25,
            init: function () {
                this.data = [];
                this.requestPage = 0;
            }
        };
        pqIS.init();

As per the code shared by you, pqIS.init() resets the requestPage to 0, so I'm not sure what's going on.

Could you please share a jsfiddle so that I can look into the details.

you can link it to remote data used in pqgrid: https://paramquery.com/pro/demos/virtual_scroll