Author Topic: Renew dataview after filtering - remote virtual scrolling  (Read 124 times)

Rimokas

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
Renew dataview after filtering - remote virtual scrolling
« on: September 15, 2021, 04:35:17 pm »
Hi,

Can't understand what I'm missing ...  :-[

Did grid with remote virtual scrolling - it works very fine. Almost identical to this sample : https://paramquery.com/demos/virtual_scroll
Now added filtering. If to fill value for filtering, I'm seeing that all is working - it return from php data.
But ... the view in datagrid changes for returned lines ( let say that return 17 lines, grid conteiner is in full widtht/height ) and leaves old lines after new data lines ... :( If to click for sorting, then renew data and then it view correct ...
What is bad ?

Mine js :

Code: [Select]
   for ( var u in kortos )
   {
      var grd_id = kortos[ u ].grido_id // grido ID

      var pqVS =
      {
         rpp: ( kortos[ u ].limitas * 1 ),
         init: function ()
         {
            this.totalRecords = 0;
            this.requestPage = 1;
            this.data = [];
         }
      }
      pqVS.init()
     
      var grd_obj =
      {
         width          : '98%',
         height         : '96%',
         virtualX       : true,
         virtualY       : true,
         resizable      : true,
         reactive       : true,
         scrollModel    : { autoFit: false },
         flex           : { one: true },
         numberCell     : { show: false },
         showHeader     : true,
         columnBorders  : true,
         rowBorders     : true,
         selectionModel : { type: 'cell' },
         stripeRows     : true,
         sortable       : true,
         sortModel      : { type: 'remote', single: false, sorter: [], space: true, multiKey: null },
         beforeSort     : function( evt ){ if ( evt.originalEvent ){ pqVS.init(); } },         
         filterModel    : { type: 'remote', on: true, header: true },
         beforeTableView: function( evt, ui )
         {
            var initV = ui.initV,
                finalV = ui.finalV,
                data = pqVS.data,
                rpp  = pqVS.rpp,
                tot  = pqVS.totalRecords,
                requestPage;
            if ( initV != null )
            {
               if ( data[ initV ] && data[ initV ].pq_empty )
               {
                  requestPage = Math.floor( initV / rpp ) + 1
               }
               else if ( data[ finalV ] && data[ finalV ].pq_empty )
               {
                  requestPage = Math.floor( finalV / rpp ) + 1
               }
           
               if ( requestPage >= 1 )
               {
                  if ( pqVS.requestPage != requestPage )
                  {
                     pqVS.requestPage = requestPage;
                     this.refreshDataAndView();
                  }
               }
            }
         }
      }
     
      grd_obj.colModel = gridai[ grd_id ].grido_conf.columns

      grd_obj.dataModel =
      {
         dataType : "JSON",
         location : "remote",
         url      : 'phpf/prg_crud.php',
         recIndx  : 'irs_id',
         postData : function()
         {
            var pst = {}
            pst[ "pq_curpage" ] = pqVS.requestPage
            pst[ "pq_rpp"     ] = pqVS.rpp
            pst[ "cmd"        ] = 'get'
            pst[ "pnk"        ] = pusl_prm
            pst[ "grd"        ] = grd_id
            return pst;
         },
         getData : function( response )
         {
            if ( response.status !== 'error' )
            {
               var data         = response.data,
                   totalRecords = response.totalRecords,
                   curPage      = response.curPage,
                   len          = data.length,
                   pq_data      = pqVS.data,
                   init         = ( curPage - 1 ) * pqVS.rpp;
               
               if ( !pqVS.totalRecords )
               {                   
                  for ( var i = len; i < totalRecords; i++ )
                  {
                      pq_data[ i + init ] = { pq_empty: true };
                  }
                  pqVS.totalRecords = totalRecords;
               }
               for ( var i = 0; i < len; i++ )
               {
                  pq_data[ i + init ] = data[ i ];
                  pq_data[ i + init ].pq_empty = false;
               }
               return { data: pq_data }
            }
            else
               setTimeout( () => { walert( response.message, 'php' ) }, 100 )
         },
         error: function( jqXHR, textStatus, errorThrown )
         {
             //alert(errorThrown);
         }
      }

      $( "#konteineris" ).pqGrid( grd_obj );
     
   }

grids columns ( from dev console - columns created in php side ) :

Code: [Select]
0:
align: "left"
columnDrag: true
dataIndx: "ord_id"
filter: {crules: Array(1), listeners: Array(1)}
hidden: false
resizable: true
sortable: true
title: "Užsakymo ID"
width: "127"
[[Prototype]]: Object
1: {dataIndx: 'item_id', title: 'Modelis', width: '127', hidden: false, columnDrag: true, …}
2: {dataIndx: 'prekes_pvd', title: 'Pavadinimas', width: '127', hidden: false, columnDrag: true, …}
3: {dataIndx: 'ord_model', title: 'Nav modelis', width: '100', hidden: false, columnDrag: true, …}
4: {dataIndx: 'ord_qnt', title: 'Kiekis', width: '62', hidden: false, columnDrag: true, …}
5: {dataIndx: 'ord_color', title: 'Spalva', width: '65', hidden: false, columnDrag: true, …}
6: {dataIndx: 'ord_date', title: 'Užsak.data', width: '93', hidden: false, columnDrag: true, …}
7: {dataIndx: 'ord_week', title: 'Užsak.sav.', width: '90', hidden: false, columnDrag: true, …}
8: {dataIndx: 'ret_date', title: 'Graž.data', width: '80', hidden: false, columnDrag: true, …}
9: {dataIndx: 'ret_week', title: 'Grąž.sav.', width: '90', hidden: false, columnDrag: true, …}
10: {dataIndx: 'fact_date', title: 'Fakt.data', width: '99', hidden: false, columnDrag: true, …}
11: {dataIndx: 'fact_week', title: 'Fakt.sav.', width: '90', hidden: false, columnDrag: true, …}
12: {dataIndx: 'mint_fact', title: 'Minut.', width: '100', hidden: false, columnDrag: true, …}
13: {dataIndx: 'sew_sum', title: 'Suma', width: '100', hidden: false, columnDrag: true, …}

Thanks in advance ...

Rimokas

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: Renew dataview after filtering - remote virtual scrolling
« Reply #1 on: September 16, 2021, 11:07:41 am »
Hi,

Added this :
Code: [Select]
         beforeFilter   : function( evt ){ pqVS.init() },         

Now it works fine ...