Our pure JavaScript Scheduler component


Post by JohnMousley »

Hi, I'm hoping you can assist with the following issue.

We have a custom tab on the task editor that contains a textAreaField.

oppHistoryTab: {
	title: 'History',
	items: {
		newNotesField: {
			type: 'textAreaField',
			name: 'oppHistory',
			id: 'oppHistory',
			label: '',
			cls: 'taskEditField',
			editable: false,
			width: 150,
			height: 250
		}
	}
},

When the task editor is loaded, we call a web API which returns some text which we then input into the TextAreaField, we do this in the beforeTaskEditShow listener:

beforeTaskEditShow({ taskRecord, editor }) {

oSelectedEvent = taskRecord;

var oHistory = fetchOppHistory(oSelectedEvent.opportunityNumber);
oHistory.then(function (data) {
	var oText = document.getElementById('oppHistory-input');
	if (oText) {
		oText.value = data.data.HistoryText;
	}
});
}

Sometimes the text that is returned is bigger than the textAreaField, this causes vertical scrolling, how can I get the scroll bar to move to the bottom automatically as in the screenshot below?

Thanks

Attachments
TaskEdit-Scrollbars.png
TaskEdit-Scrollbars.png (44.08 KiB) Viewed 614 times

Post by mats »

https://stackoverflow.com/questions/9170670/how-do-i-set-textarea-scroll-bar-to-bottom-as-a-default

After you set the value, just do

yourWidget.input.scrollTop = yourWidget.input.scrollHeight;

Post by JohnMousley »

Hi, I've tried the following code, but it makes no difference, the scrollHeight value is 0.

oText.scrollTop = oText.scrollHeight;

Post by JohnMousley »

I've also tried the following, the scrollHeight is still set to 0.

editor.widgetMap.oppHistoryField.input.scrollTop = editor.widgetMap.oppHistoryField.input.scrollHeight;

Post by mats »

Try using the 'show' event instead to set your scrollTop?

   features : {
        taskEdit : {
            editorConfig : {
                listeners : {
                    show() {
                        console.log('foo');
                    }
                }
            }
        },

Post by JohnMousley »

Hi, i tried the show method but it has the same problem, the scrollHeight is still set to 0.

                editorConfig: {
                    listeners: {
                        show() {
                            oSelectedEditor.widgetMap.oppHistoryField.input.scrollTop = oSelectedEditor.widgetMap.oppHistoryField.input.scrollHeight;
                        }
                    }
                },

I did notice that if a add a button to the tab and that button calls the same code then it works:
Is there a listener that is fired after all the editor has finished loading and all controls rendered?

oppHistoryTab: {
	title: 'History',
	weight: 100,
	items: {
		oppHistoryField: {
			type: 'textAreaField',
			name: 'oppHistory',
			id: 'oppHistory',
			label: '',
			cls: 'taskEditField',
			editable: false,
			width: 150,
			height: 250
		},
		scrollToButton: {
			type: 'button',
			text: 'Scroll To',
			icon: 'b-fa-plus',
			cls: 'noteButton',
			disabled: false,
			id: 'scrollToButton',
			name: 'scrollToButton',
			onClick: (source) => {
				try {

				oSelectedEditor.widgetMap.oppHistoryField.input.scrollTop = oSelectedEditor.widgetMap.oppHistoryField.input.scrollHeight;

			} catch (e) {
				alert(e);
			}
		}
	}
}
},

Post by mats »

You cannot read scrollHeight as long as the tab is hidden. You will have to handle this in 2 places:

  1. on show if notes tab is currently open
  2. upon notes tab activate: https://bryntum.com/docs/gantt/#Core/widget/TabPanel#event-tabChange

Post by JohnMousley »

Hi, still not having any luck, I have tried the tabChange listener in multiple places and I cannot get it to fire, see sample of code below:

Any ideas how I should setup the tabChange listener?

            taskEdit: {
                showDeleteButton: false,
                tabsConfig: {
                    listeners: {
                        tabChange(event) {
                            console.log(event);
                        }
                    }
                },
                editorConfig: {
                    listeners: {
                        tabChange(event) {
                            console.log(event);
                        }
                    }
                },
                items: {
                    tabsConfig: {
                        listeners: {
                            tabChange(event) {
                                console.log(event);
                            }
                        }
                    },
                    oppHistoryTab: {
                        title: 'History',
                        weight: 100,
                        items: {
                            oppHistoryField: {
                                type: 'textAreaField',
                                name: 'oppHistory',
                                id: 'oppHistory',
                                label: '',
                                cls: 'taskEditField',
                                editable: false,
                                width: 150,
                                height: 250
                            }
                        }
                    },

Post by mats »

Seems this is not documented well, we'll fix that. https://github.com/bryntum/support/issues/2815

Try this on your Scheduler config

listeners : {
        beforeTaskEditShow({ editor }) {
            editor.widgetMap.tabs.on('tabChange', console.log);
        },
        once : true
    }

Post by JohnMousley »

Hi, this method allowed me to scroll to the bottom, code used:

Setup the tabChange listener:

listeners: {
	beforeTaskEditShow({ taskRecord, editor }) {
		oSelectedEditor = editor;
		editor.widgetMap.tabs.on('tabChange', scrollOppHistoryToBottom);
	}
}

Created a function to check which tab and perform scroll:

function scrollOppHistoryToBottom(event) {
   
if (event.activeItem._ref === 'oppHistoryTab') { oSelectedEditor.widgetMap.oppHistoryField.input.scrollTop = oSelectedEditor.widgetMap.oppHistoryField.input.scrollHeight; } else if (event.activeItem._ref === 'commentsTab') { oSelectedEditor.widgetMap.notesField.input.scrollTop = oSelectedEditor.widgetMap.notesField.input.scrollHeight; } }

Post Reply