Premium support for our pure JavaScript UI components


Post by denysveovo »

Hello, Premium Support
In my business case I need to one of the resources takes all the available space in height. I see the config and the resource interface says that the row height is typeof number, so I can't use percentage. But it is not the main case, I overwrote it with global styles and it worked fine with resourceTimeRanges feature and it's events, but when I started using Drag&Drop feature I realized that there is a problem with that resource because for firing Drag&Drop listeners SchedulerPro still use inline height defined in config, and in some cases it works ok and in other fires only afterEventDrop with context.newResource: undefined. Tell me please, how to tell the scheduler that the resource height is flexible to it fires listeners properly?


Post by alex.l »

Hi denysveovo,

You are right, row height cannot be in percents.
To give you a specific code example we need to see your solution, we don't know what exactly you changed, but possibly it should be working as you expected and it's a bug in our code.
If possible, please apply minimal changes to one of our examples to reproduce the issue, zip and attach the code here, so we will be able to reproduce, debug and help you with that.
In theory, you just need to update resource row height value to valid.
There is a method https://bryntum.com/products/schedulerpro/docs/api/Grid/view/GridBase#config-getRowHeight that allows you to set height that you need (also according to size of another element, just get it from DOM).

All the best,
Alex


Post by denysveovo »

Here is the way I do it in my app and have the same result. If I drop within first 60px (height of other resources) it accepts drop, but if lower - it behaves like there wasn't any resource under the pointer.

Attachments
One-more-drag-and-drop-bug.mp4
(8.6 MiB) Downloaded 17 times

Post by alex.l »

Hi denysveovo,

Could you please provide code snippets you used? It's not possible to copy text from video file, unfortunately.

All the best,
Alex


Post by denysveovo »

No problem.
At first I've described styles for the resource I was going to add in app.css:

.b-grid-row.empty-resource.b-even {
  background-color: red !important;
  height: 100% !important;
  flex: 1;
}

Then I added one resource with described style class by running next command in console:

window.scheduler.eventStore.resourceStore.add({
            id: "EmptyResource",
            name: "\u00A0",
            cls: "empty-resource",
            children: []
        }
)

I did it here: https://bryntum.com/products/scheduler/examples/drag-outside/
Pretty easy I thought the video is enough, but anyway, now you have text description too. Please let me know when figure out what's going on.
Thank you in advance!
Regards!
Denys


Post by alex.l »

Hi Denys,

Thank you for the code. As I said above, you need to set height programmatically in row model, not just css adjustment. It also cannot be in percents, it should be a number.
Please see this demo https://bryntum.com/products/scheduler/examples/rowheight/
It fully shows how to manage resource row heights, all together and one by one.

All the best,
Alex


Post by denysveovo »

Hi, Alex.
That's the case I'm talking about. My business requirements is to have resizeable scheduler with resources where the last one takes all the available space. So the size of the resource and event count of the resources in scheduler can change while app is working. So is it possible to make the rowHeight flexible without getting access to the styled dom element, checking it size and forwarding this number to the resource as "rowHeight" property?


Post by alex.l »

You need to manage rowHeight from data model, not from CSS. Only that way.
Row height is already flexible and takes height according to its content. Try to drag and drop events with overlapping.
If you make rowHeight bigger, event's height inside will also be bigger, it won't become a container with 2,3,6 lines of possible drop positions.

This example https://bryntum.com/products/scheduler/examples/rowheight/ shows how to change rowHeight while app is working. Try sliders on top bar and check the source code.

resourceRecord.rowHeight = 90;

All the best,
Alex


Post by denysveovo »

rowHeight accepts numbers only but I need to it takes all the available space in scheduler which has display:flex there is no way to get the availeble empty height of the scheduler "empty space" mean space in scheduler where there is no resource at all an I need to my resource takes all that space and had all the events. You projected the scheduler in a way that it doesn't have most of the events if there is no resource, so I had to created empty one, but even those didn't solved my problem completely and I have to do one more overhead. Don't you really have a simple solution for this case?


Post by alex.l »

There is no simple solution possible here. You need to measure empty space and change rowHeight on every data/DOM change that may affect to empty space height. Also you need to manage the case when scrollbar appeared. Not sure what should happen in that case.

Maybe better to have another component with unassigned events and drag-n-drop it into scheduler's resources?
Please check this example https://bryntum.com/products/scheduler/examples/shared-crudmanager/
And this https://bryntum.com/products/schedulerpro/examples/drag-unplanned-tasks/

All the best,
Alex


Post Reply