Bryntum Support Forums

Hello,

We are using the latest Grid in a Salesforce LWC component.

We require the Tree column title (far left column) to span over the next column so we can reduce the left column width when the subheading title is longer.

I’ve tried an approach similar to an answer that I’ve found on your forum :

 
{
    text: 'Code',
    field: 'securityCode',
    cls: 'text h6',
    cellCls: 'grid__security-code',
    type: 'tree',
    locked: true,
    tooltipRenderer: false,
    autoWidth: false,
    width: 100,
    htmlEncode: false,
    renderer: ({
                   value,
                   record
               }) => record.securityName ? `<a class="grid__security-code__cell" href="${self.generateCompanySearchURL(value)}">${value}</a>` :
        '<span class="b-cell-content">' + value + '</span>'
}, {
    text: 'Security',
    field: 'securityName',…….

Basically, adding a Span class ‘b-cell-content’

Then in the CSS ,

.b-cell-content {
  z-index: 20 !important;
  position: absolute  !important;
}

I can’t seem to get anything to happen playing around with different styles via the Chrome Dev Tools -Tried with a high z-index on the whole left column and position not static.

Ideally, we are after the following

Hi, try to apply to b-tree-cell class this styling

overflow: visible;
contain: size layout style;

Hi Alex,

That doesn't seem to work. I think it's because the first column is locked. When I take ' locked: true' out, it works fine..

Thanks,
David

Hi,

I would not recommend doing so, but you could override the CSS for each DOM level from the cell (.b-grid-cell) all the way up to the subgrid (.b-grid-subgrid), making sure they are all overflow: visible and contain: none. It will have slight negative effect on performance and you will not be able to scroll that subgrid horizontally.

Result: