Premium support for our pure JavaScript UI components


Post by tpoe »

Hello Bryntum team,

first of all i want to thank you for the great tool with millions of capabilities. It must be quite a beast to maintain.

I have a problem and already invested some time into investigation. I also tried some reverse engineering, but none of my approaches really worked.

What i need: I am using the Bryntum Scheduler 4.x with Angular and i am showing the events in a stacked manner (so that overlapping events show up stacked under each other). Some of the events have a different height. Because of the fixed rowHeight the stacking algorithm seems to assume that each stacked row has the same height, so the event with the higher height is shown, but exceeding its row, which looks quite ugly.

I tried to use the getRowHeight method on the scheduler instance, just returning 600 as a test, but it is completely ignored.

All i need is someone who is pointing me to the right direction. Do i need to override the stacking algorithm of Bryntum or is there a feature which is available out of the box?

Thanks in advance, Stefan

Last edited by tpoe on Tue May 11, 2021 9:09 am, edited 1 time in total.

Post by mats »

Glad you like it :) Are you able to share screenshot of your desired UI vs what you see?


Post by tpoe »

Hello mats,

thank you for your quick reply. I am answering late, but we are in the middle of a project. :-)

See the two screenshots, to get an idea of my problem.

What i want to achieve: There is a requirement to show a chart at the bottom of each row.

I am sure that there might be a very clean solution to solve this problem, but i came up with a RATHER HACKY approach: I am creating an event that goes from the earliest startDate to the latest endDate and in the eventRenderer all i do is fill this event with an instance of echarts. (Besides i prevent context menu, tooltips and any event changes) This works like a charm so far, the only problem i have is, that the normal events should have a height of 45 pixels and the echarts should have 100 pixels (for example). I tried setting args.tplData.height to the value i want, which helps that the events are not cut off, but the stacking algorithm still uses a height of 45 pixels from the overall rowHeight, which makes the charts and the other events in the row overlap in an ugly way. As i pointed out, i tried many approaches, but none really worked.

All i need is someone pointing me to the right direction. I am not afraid of writing my own stacking algorithm, if necessary.

Attachments
wanted.png
wanted.png (278.29 KiB) Viewed 1147 times
current.png
current.png (221.14 KiB) Viewed 1147 times

Post by mats »

So you need a per-row layer to draw on - correct? Looks like you made some progress already, very nice. The best option here would probably be for you to utilize the column renderer of the TimeAxisColumn to get your own per-row layer.

This is unfortunately not possible due to: https://github.com/bryntum/support/issues/2857

But good news is we'll fix this today so then you can simply do:

 columns          : [
        { text : 'Name', field : 'name', width : 130 },
        {
            type : 'timeAxis',
            renderer() {
                return 'foo';
            }
        }
    ]

Post by mats »

If you are up for sharing the drawing of the bottom chart, I'd love to make it an official demo (with your permission of course).


Post by tpoe »

Hello mats,

your suggestion worked like a charm. Thank you for that! We added the newest milestone and the timeaxis-renderer worked. See the screenshot attached, which is already a big progress for me.

There are 2 more questions i have concerning my approach:

  1. I could not find an event which gets fired when the cell is rendered in the DOM. What i am doing now is a rather dirty approach: I am polling with window.setInterval() until the element is in the DOM and then attaching Echarts to it. I've read that the RowManager provides events for that, but unfortunately they are private. Is there an event which gets fired when my created cell is rendered in the DOM?

  2. I am manipulating the cell height with size.height at the moment, which does a great job. Unfortunately the heights of the ResourceTimeRanges are not getting the same height, so they have the original height before i added the chart (see screenshot). Is there a renderer for the ResourceTimeRanges in which i can manipulate also their height?

Thanks in advance,

Stefan

Attachments
2021-06-17 12_54_55-Pattern Lab - organisms-bryntum.png
2021-06-17 12_54_55-Pattern Lab - organisms-bryntum.png (146.2 KiB) Viewed 999 times

Post by mats »

1. I could not find an event which gets fired when the cell is rendered in the DOM. What i am doing now is a rather dirty approach: I am polling with window.setInterval() until the element is in the DOM and then attaching Echarts to it. I've read that the RowManager provides events for that, but unfortunately they are private. Is there an event which gets fired when my created cell is rendered in the DOM?

You should not need an event? If you use the column renderer, that's all that's needed unless I'm missing something?

2. I am manipulating the cell height with size.height at the moment, which does a great job. Unfortunately the heights of the ResourceTimeRanges are not getting the same height, so they have the original height before i added the chart (see screenshot). Is there a renderer for the ResourceTimeRanges in which i can manipulate also their height?

If you solve #1 correctly, #2 should not be an issue either.


Post by tpoe »

Hello mats,

Thanks for the quick reply. #1 cannot be solved directly in the renderer, because Echarts needs a DOM-element to inject its instance into. So that DOM-element needs to already exist in the DOM. At runtime of the renderer the DOM-element is not in the DOM (because the renderer returns HTML).

Regarding #2 it has nothing to do with each other, because the ResourceTimeRanges are separate elements in the DOM with their own height. At the moment they keep the original height (the height without the additional height for the Echarts instance). I also assumed that they get the same height when i set the height of the cell.

F.ex.

type : 'timeAxis'
, renderer(cell) {
    cell.size.height += 100;
    return `<div class="bryntum-chart" id="bryntum-chart-${cell.record.internalId}"></div>`;
}

cell.size.height manipulates the height of the cell, but unfortunately not the height of the ResourceTimeRanges.


Post by mats »

Using column#renderer you have access to the cellElement - doesn't that work?

https://bryntum.com/docs/scheduler/#Grid/column/Column#config-renderer

renderData : Object
Object containing renderer parameters

cellElement : HTMLElement
Cell element, for adding CSS classes, styling etc. Can be null in case of export

value : *
Value to be displayed in the cell

record : Core.data.Model
Record for the row

column : Grid.column.Column
This column

grid : Grid.view.Grid
This grid

row : Grid.row.Row
Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.

size : Object
Set size.height to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export

height : Number
Set this to request a certain row height

configuredHeight : Number
Row height that will be used if none is requested

isExport : Boolean
True if record is being exported to allow special handling during export

isMeasuring : Boolean
True if the column is being measured for a resizeToFitContent call. In which case an advanced renderer might need to take different actions.

Post by tpoe »

Hello mats,

you are right, that the cellElement is already present and i could inject echarts into that. But then the whole cellElement would become one chart. (Echarts always occupies the maximum space it can get.) I injected the div, because i am using position: absolute, bottom: 0 and height: 100px. Then i added 100 pixels to size.height. That did the job. Besides if i inject Echarts directly into the cellElement, then there is no ability to add some additional elements, beside the chart, in the future.


Post Reply