JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Grid Header Colspan and 2 Row Header with Row Span

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #101308

    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.
    Waiting for any quick solution for it.
    Thank You,


    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.