ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: atmaneuler on December 10, 2020, 01:59:03 pm

Title: How to auto resize grid height when resizing browser ?
Post by: atmaneuler on December 10, 2020, 01:59:03 pm

I want to dynamically adjust the grid height relative to the browser. How do I do? For example in my picture I want the space always be 15px when I resizing the browser.
Title: Re: How to auto resize grid height when resizing browser ?
Post by: paramvir on December 10, 2020, 04:44:18 pm
grid should be direct child of body and assign its height to "100%-15px"
Title: Re: How to auto resize grid height when resizing browser ?
Post by: atmaneuler on December 11, 2020, 07:11:57 am
This is my html code:

<nb-card class="col-md-12 col-lg-12 col-xxxl-12">
    <nb-card-header>
    </nb-card-header>
    <nb-card-body>
        <div id="grid_dday_tracking" class="general"></div>
    </nb-card-body>
</nb-card>

And this is code I set height for grid follow you:

  const optionConf: any = {
      width: 'auto',
      height: '100%-15',
      editModel: {
        clicksToEdit: 1,
      },
      numberCell: {
        show: false,
      },
      trackModel: { on: true }, // to turn on the track changes. using for rollback edit.
      columnTemplate: { editable: false, rowHtHead: 30 },
      rowHt: 30,
      wrap: false,
      hwrap: false,
      collapsible: {
        on: false,
        css: {
          zIndex: 1400,
        },
      },
      type: 'local',
      filterModel: { on: true, mode: 'AND', header: true, type: 'local' },
      dataModel: {
        data: [],
        recIndx: 'so_no',
      },
      resizable: true,
      editor: { select: true },
      colModel: colModel,
      animModel: {
        on: true,
      },

And the result is the picture. What should I do now?
Title: Re: How to auto resize grid height when resizing browser ?
Post by: paramvir on December 11, 2020, 12:45:51 pm
height in % is relative to its immediate parent.

As mentioned earlier, grid should be direct child of body in order to dynamically adjust the grid height relative to the browser.

Code: [Select]
<body>
   <div id="grid_dday_tracking"></div>