proper use of Flex

[nklapper]

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 }
      };

[paramvir]

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.

[nklapper]

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"

[paramvir]

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.

[nklapper]

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!

[paramvir]

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

[nklapper]

Perfect.

That did the trick.

Thanks!