[REACT] Custom Widget not showing

[lizhu6]

Hey there, I tried to create a custom widget to show the loading message, it takes a boolean parameter to either show/hide the "loading..." message

but for some reason, I don't see the message. I can see the widget is called

here is my code snippet

export class ProgressIndicatorWidget extends Widget {
	container: HTMLElement = document.createElement('div');

construct(configs: object[]): void {
	super.construct(configs);
}

static get $name() {
	return 'progressindicator';
}

static get type() {
	return 'progressindicator';
}

template() {
    return `<div>Loading...</div>`;
}

async refresh({record, isShow}:any) {
	this.container?.remove();
	this.container = this.container ?? document.createElement('div');
	this.container.id = "progress-container"
	
	if(isShow){
		const currentRowHeight = record.isExpanded?.height;
		const textHeight = currentRowHeight + CHART_HEIGHT + RESOURCE_MARGIN;	
		const text = document.createElement('div');	
		text.style.width= "500px";
		text.style.height= textHeight;	
		text.innerText = "loading...";
		this.container.appendChild(text);			
		this.element.appendChild(this.container);
	}
}
}

Any idea? Thank you

[tasnim]

Hi,

Please check this widget guide for this here https://bryntum.com/products/scheduler/docs/api/Core/widget/Widget
I've created a custom loading mask to give you an example
Here is codepen demo link of custom loading mask https://codepen.io/dv-auntik/pen/LYvLVrY?editors=0010

While you click on the button it will show the mask and when you click on the gray area or anywhere in the custom mask it will close
Here is a gif

msedge_mD8JomwRPK.gif (182.14 KiB) Viewed 147 times

Hope it helps.

If you have any other questions or concerns, please don't hesitate to reach out. We're here for your help!

Best of Luck ,
Tasnim

[lizhu6]

Thanks so much for the information, for some reason, it still doesn't work for my case.

I am trying to add the loading indicator widget when expanding open the embed chart, eg: https://bryntum.com/products/schedulerpro/examples/embedded-chart/

here is my code snippet:

				{
					//@ts-ignore
					type: "timeAxis",
					widgets: [{
						//@ts-ignore
						type: "mywidget"
					},
					{
						//@ts-ignore
						type: "progressindicator",
						appendTo: document.body,
						cls: "Loading",
						text: "Loading"
					}],
					async renderer({ record, grid: scheduler, widgets }: any) {						
						if (record.isExpanded?.isExpanded) {							
							widgets[1].showLoading();
							//await a promise ...
							widgets[1].hideLoading();							
						}						
					},
				},

I called

ProgressIndicatorWidget.initClass();

earlier on, but when the record is expanded, nothing happens (no loading text shows up)

[alex.l]

Hi,

renderer is not correct place to handle load mask from life cycle perspective. Try to use widget's events for that, for example this one https://bryntum.com/products/gantt/docs/api/Core/widget/Widget#event-paint

[lizhu6]

em.. I tried to move the code in paint() event, and it's not called at all

btw, I am following the sample code for embeded chart - https://bryntum.com/products/schedulerpro/examples/embedded-chart/, it seems to render the chart in the renderer event

{
                type    : 'timeAxis',
                widgets : [
                    { type : 'chartjslinechart' }
                ],
                renderer({ record, cellElement, grid: scheduler, widgets }) {
                    widgets[0].refresh({
                        record,
                        timeAxis          : scheduler.timeAxis,
                        timeAxisViewModel : scheduler.timeAxisViewModel
                    });
                }
            }

so I would like to add a loading indicator before it calls

widgets[0].refresh()

[alex.l]

em.. I tried to move the code in paint() event, and it's not called at all

Please share runnable application, we will be able to help you faster.
paint will be called before refresh anyway. I can't say what's wrong without runtime debugging, unfortunately.
How exactly did you add paint listener? Here is example how to add that

widgets : [
                    { 
                    	type : 'chartjslinechart',
                     	listeners : {
                     		paint : paintHandlerFn
                     	}
                     }
                ],