Author Topic: Newbie in React and ParamQuery (Read 2951 times)

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/[email protected]/jquery-ui.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />

	<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
	<script src="https://unpkg.com/[email protected]/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 ...

Rimokas · « **Reply #1 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 ?

Rimokas · « **Reply #2 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 ? $:-\$

paramvir · « **Reply #3 on:** September 08, 2021, 11:19:54 pm »

Please correct the dataModel

Code: [Select]

dataModel: this.data1

Rimokas · « **Reply #4 on:** September 08, 2021, 11:50:51 pm »

Thank you!

but ... not helped ...

the same, no data, no direct to "phpf/remote.php"

Rimokas · « **Reply #5 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 {};
   }   
});

paramvir · « **Reply #6 on:** September 09, 2021, 09:22:34 am »

For React:

Code: [Select]

dataModel: this.data1

For Vuejs:

Code: [Select]

dataModel: this.$options.data1

Rimokas · « **Reply #7 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 ?

paramvir · « **Reply #8 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
    };
},

Rimokas · « **Reply #9 on:** September 10, 2021, 03:20:29 pm »

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

paramvir · « **Reply #10 on:** September 12, 2021, 12:36:40 pm »

Could you please share a stackblitz.

Rimokas · « **Reply #11 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/[email protected]/jquery-ui.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />

	<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
	<script src="https://unpkg.com/[email protected]/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 ... $:-\$

paramvir · « **Reply #12 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.

Rimokas · « **Reply #13 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/[email protected]/jquery-ui.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
	<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />

	<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
	<script src="https://unpkg.com/[email protected]/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 ...

Author Topic: Newbie in React and ParamQuery (Read 2951 times)

Rimokas

Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

paramvir

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

paramvir

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

paramvir

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

paramvir

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery

paramvir

Re: Newbie in React and ParamQuery

Rimokas

Re: Newbie in React and ParamQuery