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?

Attachments
default view
default view
normal.png (32.4 KiB) Viewed 166 times
add CSS to wrap
add CSS to wrap
css-to-wrap.png (61.95 KiB) Viewed 166 times
add CSS to wrap & add autoHeight
add CSS to wrap & add autoHeight
css-to-wrap-w-autoHeight.png (28.94 KiB) Viewed 166 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.

Attachments
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 164 times

Best regards,
Márcio


Post Reply