Grid Header Colspan and 2 Row Header with Row Span

[Ronak]

Hello,
Type of Project: Angular
I want to populate the grid header with a customize column name and want to colspan and merge the 2 columns. So how could I achieve this with the smart grid?
I had referred the below sample for it but it’s updating the data column and span everything. so if it’s the case then I have to manually loop through all data and populate the grid.
https://www.htmlelements.com/angular/demos/grid/merged-cells/
Waiting for any quick solution for it.
Thank You,

[yavordashew]

Hi Ronak,
If you want to customise the grid header so that it spans over two column you can do this by accessing the columnGroups property like this:
this.grid.columns = [
{label: ‘First Name’, dataField: ‘firstName’, columnGroup: ‘name’},
{ label: ‘Last Name’, dataField: ‘lastName’, columnGroup: ‘name’ },
{ label: ‘Product’, dataField: ‘productName’, columnGroup: ‘order’},
{ label: ‘Quantity’, dataField: ‘quantity’, columnGroup: ‘order’}
]
this.grid.columnGroups = [
{ label: ‘Customer Name’, align: ‘center’, name: ‘name’ },
{ label: ‘Order Detals’, align: ‘center’, name: ‘order’ }
]
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts