Our blazing fast Grid component built with pure JavaScript

Post by trudog »

Our system has a simple component for a “tag” that is effectively stylized text. We’d like to display all of the tags for a record in single cell without cropping. It looks like the Bryntum grid crops the tags by default. When we add css to allow wrapping, all of the tags render but it’s not pretty or readable. When add the css wrapping along with an auto-height setting, it’s also not acceptable. See the screenshots below that illustrate what we are talking about.

Do you have any suggestion on what we can do to give us the desired look?

default view
default view
normal.png (32.4 KiB) Viewed 155 times
add CSS to wrap
add CSS to wrap
css-to-wrap.png (61.95 KiB) Viewed 155 times
add CSS to wrap & add autoHeight
add CSS to wrap & add autoHeight
css-to-wrap-w-autoHeight.png (28.94 KiB) Viewed 155 times

Post by marcio »

Het trudog,

You need to set up two CSS classes, one for the cell (that will be the container), and the other for the chips:

.chip {
    margin: 5px;
.chip-row {
	flex-wrap: wrap;

Then, you need to configure the column like this:

            ... Other configurations
            cellCls    : 'chip-row',
            autoHeight : true,
            renderer() {
            	// this return is just for example purposes
                return `<div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div> <div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div><div class="chip">core</div><div class="chip">edge</div>`;

PS: I added some extra UI CSS to the chip class to look better, but the only mandatory property is a margin vertically to avoid the chips being too close when wrapped.

Screen Shot 2022-07-05 at 5.08.40 PM.png
Screen Shot 2022-07-05 at 5.08.40 PM.png (85.14 KiB) Viewed 153 times

Best regards,

Post Reply