[ANGULAR] Row height

[dmiedzinski]

Hi

how to properly change event height?

Template of resource is 96px (stage-cell), event is 58px, margin is 6px = 70

if i set

<bryntum-scheduler-pro
		[rowHeight]="70"
		[barMargin]="6"[/code]></bryntum-scheduler-pro>


columns: [
		{
			text: "",
			cellCls: "stage-cell",
			editor: false,
			htmlEncode: false,
			renderer: ({ record }: { record: any }): string => {
				const { id, name, eventColor, startDate, endDate, workType, deadline, description } = record.data;
				return `
            <app-stage-column stg="${id}" name="${name}" description="${description}" color="${eventColor}" start="${startDate}" end="${endDate}" deadline="${deadline}" wkt="${workType}" description="${description}" >
            </app-stage-column>`;
			},
			align: "start",
			width: 220,
			autoHeight: true,
		},
	]

then the event items has big gaps or has larger height

if i remove autoHeight from column then events looks fine but stage-cell are cutted-of

how to deal with it?

[ghulam.ghous]

Sorry I am bit confused here. What is the expected result you want to achieve here? If I understood correctly, your cell has lot of content and it is being cut off when you do not use the autoHeight on column. I would say, you should try setting the height of the row in your renderer instead of using the autoHeight. See the size prop here: https://bryntum.com/products/scheduler/docs/api/Grid/column/Column#config-renderer

A picture of the issue you are facing would help us greatly here.

[dmiedzinski]

Can we communicate in other way? mailing or some teams? Because without screens i cannot explain it. In other way i cannot show design publicly.

[ghulam.ghous]

You can send the screens to us at support@bryntum.com.

[dmiedzinski]

thx, sended.

[ghulam.ghous]

I will check. and will reply there.

[marcio]

Hey,

Thanks for sharing the details.

I copied the parts related to the o layout of your configuration into our demo https://bryntum.com/products/schedulerpro/examples/inline-data/ and don't see the behavior that you described, perhaps some custom CSS is generating that behavior? (If you're able to reproduce that demo, please let us know).

const
    schedulerPro = new SchedulerPro({
        appendTo   : 'container',
        startDate  : '2022-03-23',
        endDate    : '2022-03-24',
        viewPreset : 'hourAndDay',
        rowHeight   : 70,
        fixedRowHeight: false,
        barMargin: 6,
        columns    : [
            {
                type           : 'resourceInfo',
                text           : 'Name',
                field          : 'name',
                showEventCount : false,
                width          : 150,
                htmlEncode: false,
                autoHeight: true,
                renderer : ({record}) => {
                    return `
                     <div>
                        <p>${record.name}</p>
                        <p>${record.name}</p>
                        <p>${record.name}</p>
                     </div
                    `
                }
            },
        ],

    project : {
        resourceStore : {
            fields : [
                { name : 'vehicleCondition', type : 'number' }
            ]
        }
    },

    resources    : data.resources,
    events       : data.events,
    assignments  : data.assignments,
    dependencies : data.dependencies
});

[dmiedzinski]

please try to make this event items half height now and see if resource column is still fully visible

[marcio]

Hey dmiedzinski,

Just added a custom renderer function with custom height, and still don't see that behavior. Could you please share a runnable test case for us to check what's causing that behavior on your side?