ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Rimokas on September 08, 2021, 12:32:12 pm

Title: Newbie in React and ParamQuery
Post by: Rimokas on September 08, 2021, 12:32:12 pm

Hi,

I'm newbie and dummy ... :(

I tried to run a sample as in https://stackblitz.com/edit/paramquery-react-locale .
What I wanna, to get remote data from mysql table and with virtual scroling.

So mine index.js looks like that :

Code: [Select]

class Pqgrid extends React.Component
{
   componentDidMount()
   {
      this.options = this.props.options
      pq.grid( this.refs.grid, this.options )
   }
   
   componentDidUpdate(prevProps)
   {
      Object.assign( this.options, this.props.options )
   }
   
   render()
   {
      //return ( <div style={{ height: '90%', position: 'absolute', left: '0px', width: '90%', overflow: 'hidden'}} ref="grid" ></div> )
      return <div ref="grid" ></div>
   }
}

class App extends React.Component
{
   constructor( props )
   {
      super( props )
     
      this.handleChange = this.handleChange.bind( this );
   
      this.pqVS =
      {
         rpp: 500,
         init: function()
         {
            this.totalRecords = 0
            this.requestPage  = 1
            this.data = []
         }
      }
      this.pqVS.init();

      this.columns1 =
      [
         { title: "Order ID", width: 100, dataIndx: "ord_id" },           
         { title: "Product Id", width: 190, dataIndx: "item_id" },
         { title: "Product Name", width: 250, dataIndx: "item_name" },
         { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
         { title: "Order Date", width: 100, dataIndx: "ord_date"},
         { title: "Order Week", width: 100, dataIndx: "ord_week"},
         { title: "Return Date", width: 100, dataIndx: "ret_date" },
         { title: "Return Week", width: 100, dataIndx: "ret_week" },
         { title: "Fact Date", width: 100, dataIndx: "fact_date" },
         { title: "Fact Week", width: 100, dataIndx: "fact_week" },
      ]
     
      this.data1 =
      {
          dataType: "JSON",
          location: "remote",
          url: "phpf/remote.php",
          postData: function()
          {
            return
            {
               pq_curpage: this.pqVS.requestPage,
               pq_rpp: this.pqVS.rpp
            }
          },
          getData: function( response )
          {
            var data = response.data,
               totalRecords = response.totalRecords,
               len = data.length,
               curPage = response.curPage,
               pq_data = this.pqVS.data,
               init = ( curPage - 1 ) * this.pqVS.rpp;

            if ( !this.pqVS.totalRecords )
            {                   
               for ( var i = len; i < totalRecords; i++ )
               {
                  pq_data[ i + init ] = { pq_empty: true }
               }
               this.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 }
         },
         error: function ( jqXHR, textStatus, errorThrown)
         {
             //alert(errorThrown);
         }
      }
     
      this.state =
      {
         reactive: true,
         width: '98%',
         height: '96%',
         showTitle: false,
         locale: 'lt',
         menuIcon: false,
         collapsible: { on: false, toggle: false },
         resizable: true,
         reactive: true,
         scrollModel: { autoFit: false },
         flex:{one: true},
         numberCell: { show: false },
         showHeader: true,
         columnBorders: true,
         rowBorders: true,
         selectionModel: { type: 'cell' },
         stripeRows: true,
         filterModel: { header: false },
         beforeTableView: function( evt, ui )
         {

            var initV = ui.initV,
                finalV = ui.finalV,
                data = this.pqVS.data,
                rpp = this.pqVS.rpp,
                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 ( this.pqVS.requestPage != requestPage )
                  {
                     this.pqVS.requestPage = requestPage
                     this.refreshDataAndView()
                  }
               }
            }
         }, //         columnTemplate: { width: 100 },
         colModel: this.columns1,
         animModel: { on: true },
         dataModel: { data: this.data1 }
      }
   }
   
   handleChange( event )
   {
      this.setState( { locale: event.target.value } )
   }
 
   render()
   {
      return <div>
         <div style={{ margin: 20 }}>
           <label>Change locale:</label>
           <select value={this.state.locale} onChange={this.handleChange}>
             <option value="lt">Lthuania</option>
             <option value="en">English</option>
           </select>
         </div>

         <Pqgrid options={this.state} />
      </div>
   }
}

ReactDOM.render(
  <App />,
  document.getElementById( 'app' )
)

Babel return error "Missing semicolon" on that:

Code: [Select]

          postData: function()
          {
            return
            {
               pq_curpage: this.pqVS.requestPage,
               pq_rpp: this.pqVS.rpp
            }
          },

pq_curpage ":" ?

The question - how to do remote virtual grid with react components ? In html5 ?

I did htm like that:

Code: [Select]

<!DOCTYPE html>
<html lang="lt">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.theme.css" rel="stylesheet" />

<script src="https://unpkg.com/jquery@1.11.2/dist/jquery.js"></script>
<script src="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.js"></script>
   
<link href="dist/pqgrid.min.css" rel="stylesheet" />
<link href="dist/pqgrid.ui.min.css" rel="stylesheet" />

<link href="dist/themes/chocolate/pqgrid.css" rel="stylesheet" />

<script src="dist/pqgrid.min.js"></script>

<script src="dist/pq-localize-en.js"></script>
<script src="dist/pq-localize-lt.js"></script>

   <script src="dist/react.development.js"></script>
   <script src="dist/react-dom.development.js"></script>
   <script src="dist/babel.js"></script>
</head>

<body>
   <div id="app"></div> <!-- style = { { height:'98vh' } }></div-->
   <script type = "text/babel" src="index.js"></script>
</body>
</html>


Thanks in advance ...  :)

Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 08, 2021, 03:27:52 pm

Ok, I found what was wrong. Changed some lines like that :

Code: [Select]

          postData: function()
          {
            return
            {
               this.pq_curpage = pqVS.requestPage,
               this.pq_rpp = pqVS.rpp
            };
          },

Now I'm seeing grid, but without data. From "Developers console/Network" I'm seeing, that react component didn't called mine "phpf/remote.php" script. So, no data in grid... :(

How to call remote "url" from react component ?

Can someone to share a sample how to do what I wanna with paramQuery grid ?

Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 08, 2021, 04:21:10 pm

Also I tried and with Vue ... but without node, only through browser... Sorry,  :(, the same - No Data ...

Mine js of vue :

Code: [Select]

Vue.component( "pq-grid",
{
  props: ["options"],
  mounted: function()
  {
    pq.grid(this.$el, this.options);
  },
  template: '<div :options="options"></div>'
});

var app = new Vue(
{
   el: "#app",
   columns1:
   [
      { title: "Order ID", width: 100, dataIndx: "ord_id" },           
      { title: "Product Id", width: 190, dataIndx: "item_id" },
      { title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
      { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
      { title: "Order Date", width: 100, dataIndx: "ord_date"},
      { title: "Order Week", width: 100, dataIndx: "ord_week"},
      { title: "Return Date", width: 100, dataIndx: "ret_date" },
      { title: "Return Week", width: 100, dataIndx: "ret_week" },
      { title: "Fact Date", width: 100, dataIndx: "fact_date" },
      { title: "Fact Week", width: 100, dataIndx: "fact_week" },
   ],
   data1:
   {
      dataType: "JSON",
      location: "remote",
      url: "phpf/remote.php",
      postData: function()
      {
         return
         {
            pq_curpage = pqVS.requestPage,
            pq_rpp = pqVS.rpp
         };
      },
      getData: function( response )
      {
        var data = response.data,
           totalRecords = response.totalRecords,
           len = data.length,
           curPage = response.curPage,
           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 }
      },
      error: function ( jqXHR, textStatus, errorThrown)
      {
          //alert(errorThrown);
      }
   },
   data: function()
   {
      var pqVS =
      {
         rpp: 500,
         init: function()
         {
            this.totalRecords = 0
            this.requestPage  = 1
            this.data = []
         }
      }
      pqVS.init();
     
      this.options =
      {
         showTitle: false,
         reactive: true,
         locale: "lt",
         height: "flex",
         numberCell: { show: false },
         columnTemplate: { width: 100 },
         colModel: this.$options.columns1,
         animModel: { on: true },
         dataModel: { data: this.$options.data1 }
      };
      return {};
   }   
});

Any help - can react or vue work with paramQuery remote ? Please, can someone share with a small sample ?  :-\

Title: Re: Newbie in React and ParamQuery
Post by: paramvir on September 08, 2021, 11:19:54 pm

Please correct the dataModel

Code: [Select]

dataModel: this.data1


Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 08, 2021, 11:50:51 pm

Thank you!

but ... not helped ...  :'( the same, no data, no direct to "phpf/remote.php"

Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 08, 2021, 11:56:19 pm

Full vue script :

Code: [Select]

var pqVS =
{
   rpp: 500,
   init: function()
   {
      this.totalRecords = 0
      this.requestPage  = 1
      this.data = []
   }
}
pqVS.init();
     
Vue.component( "pq-grid",
{
  props: ["options"],
  mounted: function()
  {
    pq.grid(this.$el, this.options);
  },
  template: '<div :options="options"></div>'
});

var app = new Vue(
{
   el: "#app",
   columns1:
   [
      { title: "Order ID", width: 100, dataIndx: "ord_id" },           
      { title: "Product Id", width: 190, dataIndx: "item_id" },
      { title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
      { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
      { title: "Order Date", width: 100, dataIndx: "ord_date"},
      { title: "Order Week", width: 100, dataIndx: "ord_week"},
      { title: "Return Date", width: 100, dataIndx: "ret_date" },
      { title: "Return Week", width: 100, dataIndx: "ret_week" },
      { title: "Fact Date", width: 100, dataIndx: "fact_date" },
      { title: "Fact Week", width: 100, dataIndx: "fact_week" },
   ],
   data1:
   {
      dataType: "JSON",
      location: "remote",
      url: "phpf/remote.php",
      postData: function()
      {
         return
         {
            pq_curpage = pqVS.requestPage,
            pq_rpp = pqVS.rpp
         };
      },
      getData: function( response )
      {
        debugger
        var data = response.data,
           totalRecords = response.totalRecords,
           len = data.length,
           curPage = response.curPage,
           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 }
      },
      error: function ( jqXHR, textStatus, errorThrown)
      {
          //alert(errorThrown);
      }
   },
   data: function()
   {
      this.options =
      {
         showTitle: false,
         reactive: true,
         locale: "lt",
         height: "flex",
         numberCell: { show: false },
         columnTemplate: { width: 100 },
         colModel: this.$options.columns1,
         animModel: { on: true },
         dataModel: this.data1 //{ data: this.$options.data1 }
      };
      return {};
   }   
});


Title: Re: Newbie in React and ParamQuery
Post by: paramvir on September 09, 2021, 09:22:34 am

For React:

Code: [Select]

dataModel: this.data1

For Vuejs:

Code: [Select]

dataModel: this.$options.data1


Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 09, 2021, 10:11:00 am

Wow, thank you!

Now direction to php file alreday exist. It leave a small problem - parameters not passed from vue script :

Notice: Undefined index: pq_curpage in C:\wamp64\www\band2\phpf\remote.php on line 10
Notice: Undefined index: pq_rpp in C:\wamp64\www\band2\phpf\remote.php on line 11

This lines are :
    $pq_curPage = $_GET["pq_curpage"];
    $pq_rPP=$_GET["pq_rpp"];

How to pass this pqGrid parameters to php file from vue ?

Title: Re: Newbie in React and ParamQuery
Post by: paramvir on September 10, 2021, 12:44:02 pm

Please correct dataModel.postData

Code: [Select]

postData: function () {
    return {
        pq_curpage: pqVS.requestPage,
        pq_rpp: pqVS.rpp
    };
},


Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 10, 2021, 03:20:29 pm

Thanks, but not helped - the same ... parameters are not passed to php file ... :(

Title: Re: Newbie in React and ParamQuery
Post by: paramvir on September 12, 2021, 12:36:40 pm

Could you please share a stackblitz.

Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 12, 2021, 08:10:53 pm

Hi,

Stackblitz ... for backend use node and similar techs ...
Mine sample is on wamp. No node, no next ...

html file :

Code: [Select]

<!DOCTYPE html>
<html lang="lt">
<head>
   <meta charset=utf-8 />
   <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.theme.css" rel="stylesheet" />

<script src="https://unpkg.com/jquery@1.11.2/dist/jquery.js"></script>
<script src="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.js"></script>
   
<link href="dist/pqgrid.min.css" rel="stylesheet" />
<link href="dist/pqgrid.ui.min.css" rel="stylesheet" />

<link href="dist/themes/chocolate/pqgrid.css" rel="stylesheet" />

<script src="dist/pqgrid.min.js"></script>

<script src="dist/pq-localize-en.js"></script>
<script src="dist/pq-localize-lt.js"></script>

   <script src="dist/vue.js"></script>
</head>

<body>
   <div id="app">
<div style="margin:20px;">
<label>Change locale:</label>
         <select v-model="options.locale">
            <option value="en">English</option>
            <option value="lt">Lithuania</option>
         </select>
      </div>
      <pq-grid :options="options"></pq-grid>
    </div>
    <script src="index2.js" ></script>
</body>
</html>

js file (index2.js):

Code: [Select]

var pqVS =
{
   rpp: 500,
   init: function()
   {
      this.totalRecords = 0
      this.requestPage  = 1
      this.data = []
   }
}
pqVS.init();
     
Vue.component( "pq-grid",
{
  props: ["options"],
  mounted: function()
  {
    pq.grid(this.$el, this.options);
  },
  template: '<div :options="options"></div>'
});

var app = new Vue(
{
   el: "#app",
   columns1:
   [
      { title: "Order ID", width: 100, dataIndx: "ord_id" },           
      { title: "Product Id", width: 190, dataIndx: "item_id" },
      { title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
      { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
      { title: "Order Date", width: 100, dataIndx: "ord_date"},
      { title: "Order Week", width: 100, dataIndx: "ord_week"},
      { title: "Return Date", width: 100, dataIndx: "ret_date" },
      { title: "Return Week", width: 100, dataIndx: "ret_week" },
      { title: "Fact Date", width: 100, dataIndx: "fact_date" },
      { title: "Fact Week", width: 100, dataIndx: "fact_week" },
   ],
   data1:
   {
      dataType: "JSON",
      location: "remote",
      url: "phpf/remote.php",
      postData: function()
      {
         return
         {
            pq_curpage = pqVS.requestPage,
            pq_rpp = pqVS.rpp
         };
      },
      getData: function( response )
      {
           var data = response.data,
           totalRecords = response.totalRecords,
           len = data.length,
           curPage = response.curPage,
           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 }
      },
      error: function ( jqXHR, textStatus, errorThrown)
      {
          //alert(errorThrown);
      }
   },
   data: function()
   {
      this.options =
      {
         showTitle: false,
         reactive: true,
         locale: "lt",
         height: "flex",
         numberCell: { show: false },
         columnTemplate: { width: 100 },
         colModel: this.$options.columns1,
         animModel: { on: true },
         dataModel: this.data1 //{ data: this.$options.data1 }
      };
      return {};
   }   
});

php file ( remote.php ) :

Code: [Select]

<?php

    require_once 'conf2.php';

    $dbh = getDatabaseHandle();
                
    $sql = "select orders.*, items.prekes_pvd from orders 
    left join items on items.prekes_id = orders.item_id and items.prekes_tipo_id ='prod'"; 

    $pq_curPage = $_GET["pq_curpage"];
    $pq_rPP=$_GET["pq_rpp"];
    
    $sqt = "Select count(*) from orders";
    $stmt = $dbh->query($sqt);    
    $total_Records = $stmt->fetchColumn();
    
    $skip = ($pq_rPP * ($pq_curPage - 1));
    if ($skip >= $total_Records)
    {        
        $pq_curPage = ceil($total_Records / $pq_rPP);
        $skip = ($pq_rPP * ($pq_curPage - 1));
    }
    $sql .= " limit " . $skip . ", " .$pq_rPP;
    $stmt = $dbh->query($sql);
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $sb = "{\"totalRecords\":" . $total_Records . ",\"curPage\":" . $pq_curPage . ",\"data\":".json_encode($rows)."}";
    echo $sb;

?>

You can change "select * from " in php for your own "select" and "columns1" according to data table "select ...".

That is all ...

Mine purpose is to try vue with virtual remote scrolling like in this sample : https://paramquery.com/pro/demos/virtual_scroll

Maybe I don't understand - maybe vue in this way ( only from browser ) can't work ...  :-\

Title: Re: Newbie in React and ParamQuery
Post by: paramvir on September 14, 2021, 10:54:17 am

All the PQ features work in React and Vue.

I don't see the corrections pointed out in my earlier posts regarding dataModel in your latest code.

Title: Re: Newbie in React and ParamQuery
Post by: Rimokas on September 14, 2021, 10:47:45 pm

Hi,

after some search and debugging I run vue sample ... Now it's working.

Main changes :
- in postData

Code: [Select]

      postData: function()
      {
         var pst = {}
         pst[ "pq_curpage" ] = pqVS.requestPage
         pst[ "pq_rpp"     ] = pqVS.rpp
         return pst;
      },

- in a dataModel :

Code: [Select]

dataModel: this.$options.data1
remote.php :

Code: [Select]

<?php

    require_once 'conf2.php';

    $dbh = getDatabaseHandle();
                
    $sql = "select orders.*, items.prekes_pvd from orders 
    left join items on items.prekes_id = orders.item_id and items.prekes_tipo_id ='prod'"; 

    $url = $_SERVER[ 'QUERY_STRING' ];
    parse_str( $url, $rqs );
    $pq_curPage = $rqs[ "pq_curpage" ];
    $pq_rPP= $rqs[ "pq_rpp" ];
    
    $sqt = "Select count(*) from orders";
    $stmt = $dbh->query($sqt);    
    $total_Records = $stmt->fetchColumn();
    
    $skip = ($pq_rPP * ($pq_curPage - 1));
    if ($skip >= $total_Records)
    {        
        $pq_curPage = ceil($total_Records / $pq_rPP);
        $skip = ($pq_rPP * ($pq_curPage - 1));
    }
    $sql .= " limit " . $skip . ", " .$pq_rPP;
    $stmt = $dbh->query($sql);
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $jrt = [];   
    $jrt[ "totalRecords" ] = $total_Records;
    $jrt[ "curPage" ] = $pq_curPage;
    $jrt[ "data" ] = $rows;
    echo json_encode( $jrt );

?>

But ... if to work with Vue only through browser, backend not "node" as a sample - working speed is slowly ... maybe it needs other dependences in the browser, at this time I don't know ...

Then I tried with additionals changes and with react - surprise, but react speed was great as with usual jquery ...

react html:

Code: [Select]

<!DOCTYPE html>
<html lang="lt">
<head>
   <meta charset=utf-8 />
   <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.theme.css" rel="stylesheet" />

<script src="https://unpkg.com/jquery@1.11.2/dist/jquery.js"></script>
<script src="https://unpkg.com/jquery-ui-pack@1.12.2/jquery-ui.js"></script>
   
<link href="dist/pqgrid.min.css" rel="stylesheet" />
<link href="dist/pqgrid.ui.min.css" rel="stylesheet" />

<link href="dist/themes/chocolate/pqgrid.css" rel="stylesheet" />

<script src="dist/pqgrid.min.js"></script>

<script src="dist/pq-localize-en.js"></script>
<script src="dist/pq-localize-lt.js"></script>

   <script src="dist/react.development.js"></script>
   <script src="dist/react-dom.development.js"></script>
   <script src="dist/babel.js"></script>
</head>

<body>
   <div id="app" style="height: 99vh;" ></div>
   <script type = "text/babel" src="index.js"></script>
</body>
</html>

react.js (index.js - must call as type "text/babel" ) :

Code: [Select]

class Pqgrid extends React.Component
{
   componentDidMount()
   {
      this.options = this.props.options
      pq.grid( this.refs.grid, this.options )
   }
   
   componentDidUpdate(prevProps)
   {
      Object.assign( this.options, this.props.options )
   }
   
   render()
   {
      return <div style={{ height: '90vh'}} ref="grid" ></div>
   }
}

class App extends React.Component
{
   constructor( props )
   {
      super( props )
     
      this.handleChange = this.handleChange.bind( this );
   
      var pqVS =
      {
         rpp: 500,
         init: function()
         {
            this.totalRecords = 0
            this.requestPage  = 1
            this.data = []
         }
      }
      pqVS.init();

      this.columns1 =
      [
         { title: "Order ID", width: 100, dataIndx: "ord_id" },           
         { title: "Product Id", width: 190, dataIndx: "item_id" },
         { title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
         { title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },           
         { title: "Order Date", width: 100, dataIndx: "ord_date"},
         { title: "Order Week", width: 100, dataIndx: "ord_week"},
         { title: "Return Date", width: 100, dataIndx: "ret_date" },
         { title: "Return Week", width: 100, dataIndx: "ret_week" },
         { title: "Fact Date", width: 100, dataIndx: "fact_date" },
         { title: "Fact Week", width: 100, dataIndx: "fact_week" },
      ]
     
      this.data1 =
      {
          dataType: "JSON",
          location: "remote",
          url: "phpf/remote.php",
          postData: function()
          {
             var pst = {}
             pst[ "pq_curpage" ] = pqVS.requestPage
             pst[ "pq_rpp"     ] = pqVS.rpp
             return pst;
          },
          getData: function( response )
          {
            var data = response.data,
               totalRecords = response.totalRecords,
               len = data.length,
               curPage = response.curPage,
               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 }
         },
         error: function ( jqXHR, textStatus, errorThrown)
         {
             //alert(errorThrown);
         }
      }
     
      this.state =
      {
         reactive: true,
         width: '98%',
         height: '96%',
         showTitle: false,
         locale: 'lt',
         menuIcon: false,
         collapsible: { on: false, toggle: false },
         resizable: true,
         reactive: true,
         scrollModel: { autoFit: false },
         flex:{one: true},
         numberCell: { show: false },
         showHeader: true,
         columnBorders: true,
         rowBorders: true,
         selectionModel: { type: 'cell' },
         stripeRows: true,
         filterModel: { header: false },
         beforeTableView: function( evt, ui )
         {

            var initV = ui.initV,
                finalV = ui.finalV,
                data = pqVS.data,
                rpp = pqVS.rpp,
                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()
                  }
               }
            }
         },
         colModel: this.columns1,
         animModel: { on: true },
         dataModel: this.data1
      }
   }
   
   handleChange( event )
   {
      this.setState( { locale: event.target.value } )
   }
 
   render()
   {
      return <div>
         <div style={{ margin: 20 }}>
           <label>Change locale:</label>
           <select value={this.state.locale} onChange={this.handleChange}>
             <option value="lt">Lthuania</option>
             <option value="en">English</option>
           </select>
         </div>

         <Pqgrid options={this.state} />
      </div>
   }
}

ReactDOM.render(
  <App />,
  document.getElementById( 'app' )
)

The remote the same ...

Thanks for help ... and will ask in the future ... :)