ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: OlottSoft on May 19, 2020, 10:38:03 pm

Title: How do you make a Grid header?
Post by: OlottSoft on May 19, 2020, 10:38:03 pm

How do I make the Grid header look like a picture?

   

Title: Re: How do you make a Grid header?
Post by: paramvir on May 19, 2020, 11:25:59 pm

These are grouped headers which are created by nesting colModel.

Example: https://paramquery.com/pro/demos/showhide_groups

Title: Re: How do you make a Grid header?
Post by: OlottSoft on May 20, 2020, 01:03:06 pm

I can't quite understand the attached example.

The headers of the example are 1 at the top and N at the bottom.

What I'm trying to do is in the form of N top and one bottom.

Please give me an easy sample code.

Thank you for your answer.

I'm not good at English, so I'm using the power of the translator.

I hope you understand.

Title: Re: How do you make a Grid header?
Post by: paramvir on May 20, 2020, 03:30:30 pm

Oh ok, sorry about that.

Inverted column grouping  in the form of N top and one bottom is not feasible with standard headers.

However you can take help of cell merging and use body cells as header cells to create that kind of layout.

Code: [Select]

    showHeader: false,
    freezeRows: 2,
    mergeCells: [
      //r1 is shorthand for rowIndx, c1 for colIndx, rc for rowCount or rowspan, cc for columnCount or colspan.
      {
        r1: 0,
        c1: 0,
        rc: 2,
        cc: 1
      },
      {
        r1: 1,
        c1: 1,
        rc: 1,
        cc: 4
      },
      {
        r1: 1,
        c1: 5,
        rc: 1,
        cc: 5
      }
    ],

Please check this https://jsfiddle.net/9g6342t8/

Title: Re: How do you make a Grid header?
Post by: OlottSoft on May 20, 2020, 05:13:08 pm

Oh, that's right. That's what I wanted to know.
I have one more question.
How do I organize the body area in the same format as the header?

So you just have to define it like a standard header and connect the data, and now how do you make the data connection?

I love your answers to the questions that I don't
Thank you very much.

Title: Re: How do you make a Grid header?
Post by: paramvir on May 20, 2020, 10:27:54 pm

The previous way is not a standard way to create header but a workaround to imitate the merge cell layout only as shared by you in the screenshot manually in body of grid.

Note: the standard header features like column resizing, sorting, filtering and other header stuff don't work along with this workaround because the actual header is hidden with showHeader: false