Nested Vaadin Grids

Flow
1

I am using the vaadin-grid webcomponent in an app where I have 3 nested grids, A has B in row-details, and B has C in row-details as seen below. The problem I am having is that the height of the row-detail seems to be exactly enough for the number of rows in the nested table, but not the header row, thus a scrollbar is inserted. I haven’t been able to see how to fix this. Any suggestions?

I will admit that it’s an older version of the component since we are currently stuck in an older version of Polymer, though hope to be upgrading by early next year. In the meantime I’m trying to make this work.


.grid {
	height: auto;
	display: flex;
	flex: 1;
	white-space: normal;
	--vaadin-grid-header-cell: {
		white-space: normal;
	}
	--vaadin-grid-body-cell: {
		white-space: nowrap;
	}
	--vaadin-grid-body-row-selected-cell: {
		background-color: #2fbfd;
	}
}

<vaadin-grid id="files" class="grid" items="[[_fileData]
]" size="[[_fileData.length]
]" class="grid" on-active-item-changed="_selectFile">
	<template class="row-details">
			<vaadin-grid id="[[_getFcnTableId(item.id)]
]" class="grid" items="[[_getFcnItems(item.id)]
]"
						 on-active-item-changed="_selectFunction">
				<template class="row-details">
					<vaadin-grid id="[[_getLnnoTableId(item.fileId,item.id)]
]" class="grid" 
								 items="[[_getLnnoItems(item.fileId,item.id)]
]"
								 on-active-item-changed="_updateCCSWindowsWithLine">
						<vaadin-grid-column resizable>
							<template class="header">Line No</template>
							<template>[[item.line]
]</template>
						</vaadin-grid-column>
						<vaadin-grid-column resizable>
							<template class="header">Start Address</template>
							<template>[[item.addr]
]</template>
						</vaadin-grid-column>
						...
					</vaadin-grid>
				</template>
				<vaadin-grid-column hidden>
					<template class="header">ID</template>
					<template>[[item.fileId]
]</template>
				</vaadin-grid-column>
				<vaadin-grid-column resizable>
					<template class="header">Function Name</template>
					<template>[[item.name]
]</template>
				</vaadin-grid-column>
				...
			</vaadin-grid>
	</template>
	<vaadin-grid-column hidden>
		<template class="header">ID</template>
		<template>[[item.id]
]</template>
	</vaadin-grid-column>
	<vaadin-grid-column resizable>
		<template class="header">File name</template>
		<template>[[item.name]
]</template>
	</vaadin-grid-column>
	...
</vaadin-grid>
2

Hello, Tor and sorry for the delayed response!

I’m not able to reproduce the issue with the latest version of Grid. Could you please specify the version you’re using?

My guess, it that the height of row-details is dynamic and you need to call notifyResize() method on grid after row-details content is rendered.

3

Thanks for replying this time of the week :slight_smile:

I am using an older version, 2.0.3 I believe.

It’s not the notifyResize(), I actually do call that. The thing is that the height of the expanded item is calculated as N row items tall for an N row table, which would be perfectly fine, except for the header row. It looks like the missing space is just the size of the header.

Tor

4

Hello, Tor

It’s not the notifyResize(), I actually do call that.

In my assumption I missed the small detail - calling notifyResize() should happen inside the Polymer.RenderStatus.afterNextRender callback.

The part which resizes nested grid:

_resizeRowDetails: function() {
  var grid = this.$.grid;

  Polymer.RenderStatus.afterNextRender(grid, function() {
    grid.notifyResize();
  });
}
5

Vladimir,

I did what you suggested, and it still didn’t work. Then I played around with a style sheet that is being included. Commenting out the following got it all to work as you described:

		html * {
			-webkit-box-sizing : border-box;
			-moz-box-sizing : border-box;
			box-sizing : border-box;
		}

However, due to related web apps and components, commenting out that CSS is not viable, though it demonstrates where the problem is. I found various threads about box-sizing, even some related to vaadin-grid. I tried adding the following to the style section (based on the content of the thread https://github.com/vaadin/vaadin-grid/issues/786), but it isn’t working either:

        vaadin-grid tbody {
            box-sizing: content-box;
        }