paramquery pro grid 7.1 header merger(rowspan)

[unbinara]

how to merge this header columns

i tried to make like this code. but, not working...

(i attached the detail image for understanding)

############## code ####################

$(document).ready(function () { 
   initGrid();
});

function initGrid(){
   var defHeight = '220';
   var opt = {
         height : defHeight,
         showTop : false,
         showToolbar : false,
         showBottom: false,
            showTitle: false,
            wrap: false,
            editable: false,

            title: "", //ParamQuery Grid with Array data
            resizable:true,
            scrollModel: {autoFit: false}, 
            columnTemplate: { width: 150 },

    };
   
   var colArr = getColModel();
   opt.colModel = colArr;
   opt.mergeCells = [
                     { r1:0,c1:11,rc:2,cc:3 },
                    
                    
   ];
   $grid = $("#pqgrid").pqGrid(opt);
   gPQGRID = $("#pqgrid").pqGrid( 'instance' );
   gPQGRID.refresh();
}

function getColModel(){
   var colArr = [      
                  { title: "User",      width: 60,       align: "center",    dataType: "string"},
                  { title: "User Group",   width: 100,    align: "center",    dataType: "string"},
                  { title: "User Operation",   align: "center",
                     colModel : [
                                 {title: "User Operation1",   align: "center",
                                    colModel:[
                                              {title: "Status",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "User",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "Time",   width: 60,    align: "center",  dataType: "string"},
                                    ]
                                 },
                                 {title: "User Operation2",         align: "center",      
                                    colModel:[
                                              {title: "Status",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "User",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "Time",   width: 60,    align: "center",  dataType: "string"},
                                    ]
                                 },
                                 {title: "User Operation3",      align: "center",   
                                    colModel:[
                                              {title: "Status",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "User",   width: 60,    align: "center",  dataType: "string"},
                                              {title: "Time",   width: 60,    align: "center",  dataType: "string"},
                                    ]
                                 }
                     ]
                  },
                  { title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "Status",   width: 60,    align: "center",  dataType: "string"}]} ]},
                  { title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "User",       width: 60,    align: "center",  dataType: "string"}]} ]},
                  { title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "Time",       width: 60,    align: "center",  dataType: "string"}]} ]}
                    ];
   
   
   return colArr;
}

[paramvir]

Please change this

Code: [Select]

{ title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "Status",   width: 60,    align: "center",  dataType: "string"}]} ]},
                  { title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "User",       width: 60,    align: "center",  dataType: "string"}]} ]},
                  { title: "User Result",   align: "center", colModel : [{ title: "User Result",   align: "center", colModel:[ {title: "Time",       width: 60,    align: "center",  dataType: "string"}]} ]}

to the following:

Code: [Select]

{ title: "User Result",   align: "center",
  colModel: [
    {title: "Status",   width: 60,    align: "center",  dataType: "string"},
    {title: "User",       width: 60,    align: "center",  dataType: "string"},
    {title: "Time",       width: 60,    align: "center",  dataType: "string"}
  ]
}


[unbinara]

firstly, thanks your reply..
but, this is not the result that i want..
your reply : 20200727_pqgrid_multiheader2.png (attached)
my expectation : 20200727_pqgrid_multiheader3.png (attached)

please, how to solve like this (20200727_pqgrid_multiheader3.png)

[paramvir]

I'm afraid that's not feasible.

However adding hvalign: 'bottom' to the columnTemplate option is helpful to align text in all the bottom header cells.

https://paramquery.com/pro/demos/group_columns

[unbinara]

I really thanks for your quick advice!.
but, it is not the way that i want still...
i understand the no way to solve it. but, as your mention, there is the only way to look like it.
so, i find out the another way to be shown like it as below.

anyway, thanks your advice and i find out my own solution after your advice.

div#pq-head-cell-u0-1-11-right {
    border-top: unset;
}

{ colModel : [ {   title: "User Result",      align: "center",
               colModel:[
                       {title: "Status",width: 60, align: "center",  dataType: "string"},
                       {title: "User",   width: 60, align: "center",  dataType: "string"},
                       {title: "Time",   width: 60, align: "center",  dataType: "string"},
               ]
            }]
}