ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: nklapper on June 24, 2016, 09:53:55 pm

Title: proper use of Flex
Post by: nklapper on June 24, 2016, 09:53:55 pm

I would like my grid to use Flex and still allow resize of columns.  Is this possible?  I have tried several API methods, and Flex works, but cannot make the columns resizable.

Here is the relevant code:

      var obj = {
      //width: "flex",
      flexWidth: true,
      height: "flex",
      maxWidth: '98%',
        dataModel: dataModel,
        colModel: colM,
        //scrollModel:{pace: 'fast', autofit:true, theme: true },
        showTop : false,
        editable: true,
        sortModel: {
         on: true,
         sorter:[ { dataIndx: "deviceID", dir: "up" } ],
         multiKey: 'shiftKey',
         type: 'remote'
         },
      //stripeRows: true,
        resizable: true,
        columnBorders: true,
        freezeCols: 1,
      filterModel: { on: true, mode: "AND", header: true, type: "remote"},
        selectionModel: { type: 'cell' },
        pageModel: { type: 'remote', rPP: 15, rPPOptions:[10, 15, 25, 50, 100, 250, 500]},
        numberCell: {show: false},
      //flex: { one: true }
      };

Title: Re: proper use of Flex
Post by: paramvir on June 27, 2016, 11:11:29 am

flex can be applied to the columns initially( but not on every refresh), so that they remain resizable.

For it, you have to change this:

Code: [Select]

pq.grid("#grid_json", obj)
            .on("refresh refreshCell", function (evt, ui) {
                if (ui.source != 'flex') {
                    this.flex();
                }
            });

to

Code: [Select]

pq.grid("#grid_json", obj)
            .on("refreshCell", function (evt, ui) {
                if (ui.source != 'flex') {
                    this.flex();
                }
            });

and remove resizable: false property from columns if any.

Title: Re: proper use of Flex
Post by: nklapper on June 27, 2016, 07:04:23 pm

I made your suggested changes as follows:

/*
         pq.grid("#grid_php", obj)
            .on("refresh refreshCell", function (evt, ui) {
            if (ui.source != 'flex') {
                    this.flex();
                }
            });
*/         
         pq.grid("#grid_json", obj)
            .on("refreshCell", function (evt, ui) {
                if (ui.source != 'flex') {
                    this.flex();
                }
            });

______________________________________________________________

It produces this error: "Uncaught TypeError: Cannot read property 'on' of null"

Title: Re: proper use of Flex
Post by: paramvir on June 27, 2016, 07:09:55 pm

That code snippet is in context of flex demo.

You need to make change according to your code, please replace grid_json with grid_php, etc.

Title: Re: proper use of Flex
Post by: nklapper on June 27, 2016, 07:22:35 pm

So sorry for the obvious error, I should have spotted that.

Grid now displays and columns are resizable, but the columns are no longer "flexed" as they were before to effectively no-wrap.

Please see attached screen capture.

Thanks!

Title: Re: proper use of Flex
Post by: paramvir on June 27, 2016, 11:47:30 pm

Please add flex: { one: true } in the options.

Title: Re: proper use of Flex
Post by: nklapper on June 28, 2016, 12:16:26 am

Perfect.

That did the trick.

Thanks!