I want to set the grid header cell row span, how to do it?

Question

As shown below ，i want to merge the cell "Order21" and the blank cell below  into one cell, how to do it .please help, thanks!Attachment: Grid3_172ba3c9.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi bingxueyinlian, 
 
Based on the provided information we could understand that your requirement is to identify the column header positions from the headerCellInfo event handler. Since the Grid does not have header spanning support, the header row and column indexes are not defined in the node element with the stacked columns. If you need to find the header positions, then you would have to calculate the column index from the total rendered column header elements and based on that identify the column positions and apply the span accordingly. And this would have to be done once the Grid rendering is completed since the header elements have to be appended in the DOM. So, our suggestion would be to achieve your requirement using the header text approach itself. 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi bingxueyinlian, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to set row span for a column header(in your case ‘Order21’ column) which has empty header cell below it due to stacked headers rendered in the consecutive columns. You can achieve this by setting the rowSpan property as 1 to the node element of the Grid’s headerCellinfo(triggered for each header cell) event arguments when it is invoked for the required column. 
 
This is demonstrated in the below code snippet, 
 




// Grid’s headerCellInfo event handler 
headerCellInfo: function (args) { 
  // Check if the event is triggered for the required column 
  if (args.cell.column.headerText === "Order21") { 
    // The row span is set to the node element 
    args.node.rowSpan = 1; 
  } 
} 
 
Using the shared code file, we have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://codesandbox.io/s/vue-forked-97qos?file=/src/App.vue 
 
API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#headercellinfo 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

bingxueyinlian · Answer

thanks for your reply, but i use bootstrap4.css does not work.

use material.css it works.

@import 'https://cdn.syncfusion.com/ej2/material.css';

but use bootstrap4.css does not work, my project used bootstrap4.css

@import 'https://cdn.syncfusion.com/ej2/bootstrap4.css';

thanks !

bingxueyinlian · Answer

Even if you use material.css, "Order21" should be one cell, now it is two cells, there is no border line in the middle, and it can't be displayed vertically in the center.

Sujith Kumar Rajkumar · Answer

Hi bingxueyinlian, 

Based on the provided information we would like to inform you that the spanning support is not available for the Grid column headers. The solution we had suggested in the previous update was a workaround since your requirement was just to display the two header cells(one with value and another one empty) as one. And we apologize for not mentioning it in that update. 

However we tried this customization for other themes but faced some complexities in achieving the same and even if we get to display the cells as one, they will remain as individual cells and your mentioned customization cannot be achieved here. This is because as mentioned above, we have not provided support for spanning in the Grid and the workaround does not merge the cells. That is why we have provided the stacked headers support in the Grid and so if you need to achieve this requirement then we suggest you to use the stacked header approach to achieve the same. 

We would also like to inform you that row and column spanning support is available for the Grid content and you can also utilize this based on the requirement. More details on this can be checked in the below links, 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-spanning 
                              https://ej2.syncfusion.com/vue/documentation/grid/row/#row-spanning 
 
Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/column-spanning.html 
                                        https://ej2.syncfusion.com/vue/demos/#/material/grid/row-spanning.html 

Let us know if you have any concerns. 

Regards, 
Sujith R

bingxueyinlian · Answer

Thanks again, and my requirement is to customize the header,i try to set rowSpan and hide the blank cell, like below。It looks ok，but how do I get the cell position (column index and row index ) from args. I want to set rowSpan by position instead of headerText

headerCellInfo: function (args) {
      console.log('headerCellInfo', args.cell);
      if (args.cell.column.headerText === 'Order21') {
        args.node.rowSpan = 2;
      } else if (args.cell.column.headerText === '') {
        args.node.style.display = 'none';
      }
    },