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

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Yavor Dashev 8 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101308
    Avatar
    Ronak
    Participant

    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,

    #101309
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.