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
    Posts
  • #101308
    Ronak
    Member
    Up
    0
    Down

    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
    yavordashew
    Member
    Up
    0
    Down

    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.