React dropdown - 7.1 update


#1

Hi I’m just trying to implement fluent ui dropdown (https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown) with the 7.1 update. Everything renders, but the dropdown options seem to float to the top left of the page on the first click and only if the row is first selected will the options appear in their expected position. Can you help me out at all?

The following is the basic code I used to test.

const options: IDropdownOption[] = [
{ key: ‘1’, text: ‘Not Started’ },
{ key: ‘2’, text: ‘In Progress’ },
{ key: ‘3’, text: ‘Completed’ },
{ key: ‘4’, text: ‘Not Applicable’ },
];

        if (currentColumnName === 'a1a_actionstatus') {
            columnConfig.onrender = function (item: any, node: any) {
                if (item.level === 'activity') {
                    return <Dropdown
                            placeholder="Progress"
                            options={options}
                        />

                }
            }
        }

gantt.config.external_render = {
    // checks the element is a React element
    isElement: (element:any) => {
        return React.isValidElement(element);
    },
    // renders the React element into the DOM
    renderElement: (element:any, container:any) => {
        ReactDOM.render(element, container);
    }
};

#2

I’ve also noticed that if I scroll too fast my react components won’t render.


#3

Hello,

Everything renders, but the dropdown options seem to float to the top left of the page on the first click and only if the row is first selected will the options appear in their expected position. Can you help me out at all?

It seems that the issue occurs because when you click on the dropdown, Gantt selects the tasks and repaints the row. This is happening at the time when React is trying to render the Dropdown elements. As the original element is removed, React shows the dropdown elements at the top-left position.

You need to return false in the onTaskClick event handler when you click on the dropdown so that Gantt won’t select the task:

    gantt.attachEvent("onBeforeTaskSelected", function(id){
      if (gantt.$cancelTaskSelect){
        gantt.$cancelTaskSelect = false;
        return false;
      }
      return true;
    });

    window.addEventListener('mousedown', function(e){   
      if (e.target.className.indexOf("ms-Dropdown-title") > -1){
        gantt.$cancelTaskSelect = true;
      }
    });

Here is the demo:
https://files.dhtmlx.com/30d/b94440e72c70491f46280f7326b82b14/reactive-gantt+gantt-instance+react-components+fluent-ui.zip


I’ve also noticed that if I scroll too fast my react components won’t render.

It seems that you don’t need to scroll fast. Just scroll down and up, and the elements will disappear. It should be a bug in Gantt. I will forward that information to the dev team. They will fix it in the future, but I cannot give you any ETA.


#4

Thanks, ramil - this is super helpful and I’ll give it a go. :grinning:


#5

Hey mate - I know you said you couldn’t give me an eta on the ‘onrender’ issue. I was just wondering if there could be a workaround? It seems that whenever I call a gantt.render() the dropdown gets rendered the second time. Putting that on the onscroll won’t work (well not with the timeline drag, but vertically it’s ok). Do you think there could be a way to check the element rendered or not and then trigger a gantt.render()?


#6

Hello,
You can try to manually repaint the tasks in the onGanttScroll event handler, but it may affect performance:

var top_position = 0;
gantt.attachEvent("onGanttScroll", function (left, top){
	if (top != top_position){
		top_position = top;
		gantt.eachTask(function(task){
			var node = gantt.getTaskRowNode(task.id);
			if (node){
				var react_element = node.querySelector(".ms-Dropdown-container")
				if (!react_element ) gantt.refreshTask(task.id);
			}
		})
	}
});

#7

That did seem to cause a minor hit to performance. I’ve turned off smart rendering and that seems to have resolved the issue. Which is fine for the volumes I’m initially expecting. Are there configuration options for smart rendering beyond true/false?

Thanks again for your help mate. I really appreciate it. :slight_smile:


#8

Hello,
Thank you for the positive feedback.

No, there are no additional options for the smart_rendering config.


#9

Hello,
The dev team fixed the bug with the onrender function. Now, React elements shouldn’t disappear after you scroll Gantt vertically:
https://docs.dhtmlx.com/gantt/whatsnew.html#716


#10

Thanks for letting me know, ramil! :slight_smile: