Problem using flex

[nklapper]

I tried to use exactly the code in http://paramquery.com/pro/demos/flex

but it does not work.

Here is the code:

  $(function () {

      //define colModel
        var colM = [
            { title: "Device ID", dataIndx: "deviceID", filter: { type: 'textbox', condition: 'contain', listeners: ['change']} },           
            { title: "Customer Name",  dataIndx: "dataONE", filter: { type: 'textbox', condition: 'contain', listeners: ['change']} },
            { title: "App Name",  dataIndx: "appNAMEold", filter: { type: 'textbox', condition: 'contain', listeners: ['change'] } },
            { title: "Customer Name",  dataIndx: "dataONE", filter: { type: 'textbox', condition: 'contain', listeners: ['change']} },
            { title: "App Name",  dataIndx: "appNAMEold", filter: { type: 'textbox', condition: 'contain', listeners: ['change'] } },
            { title: "Customer Name",  dataIndx: "dataONE", filter: { type: 'textbox', condition: 'contain', listeners: ['change']} },
            { title: "App Name",  dataIndx: "appNAMEold", filter: { type: 'textbox', condition: 'contain', listeners: ['change'] } },
            { title: "Last Launched",  dataIndx: "lastLAUNCH", dataType: "date", filter: { type: 'textbox', condition: "between", init: pqDatePicker, listeners: ['change'] } }
        ];
      //define dataModel
      var dataModel = {
          location: "remote",
          paging: "remote",
          dataType: "JSON",
          method: "POST",
          curPage: 1,
          filterIndx: "",
          filterValue: "",
/*---->*/ url: "test10tdata.php", //************************************************************************************
        postData: function(){ var obj = {pq_curpage: this.curPage, pg_rpp: this.rPP}; return obj;},
        getData: function ( dataJSON ) {               
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
        }
      }
 
      var obj = {
      width: 'flex',
      flex: { one: true },
      maxWidth: '100%',
      height: 430,
        dataModel: dataModel,
        colModel: colM,
        scrollModel:{pace: 'fast', autoFit: true, theme: true },
        showTop : false,
        editable: true,
        sortable: false,
        resizable: true,
        columnBorders: true,
        freezeCols: 1,
        filterModel: { on: true, mode: "AND", header: true },
        selectionModel: { type: 'cell' },
        pageModel: { type: 'remote', rPP: 15, rPPOptions:[10, 15, 25, 50, 100]},
        numberCell: {show: false}
      };

     // var $grid = $("#grid_php").pqGrid(obj); // if this is replaced with the code below, it does not work

   //////////////////////////////////////////////////////////////////
     pq.grid("#grid_php", obj)
      .on("refresh refreshCell", function (evt, ui) {
         if (ui.source != 'flex') {
            this.flex();
         }
      });
   //////////////////////////////////////////////////////////////////
   
    $grid.one("pqgridload", function (evt, ui) {
        $grid.pqGrid("refreshHeader");
      });
      
  });

[paramvir]

It works fine on my end, you may check by modifying the remote paging demo.

http://paramquery.com/pro/demos/paging

Please share an example test case reproducing the issue.