[SOLVED] Inline Editor and lightbox: On enter key shows Lightbox

Gantt
#1

Hi!

I’m having a issue: when I edit a line and try to save with the enter key, it opens the lightbox without saving the work done. Is this a issue or do I have to change a event on the gantt?

Thanks in advance!

#2

Hello,
I tried to reproduce it in our samples, but inline editors save the data when I press “Enter” and don’t open the lightbox even if I do that several times:
https://docs.dhtmlx.com/gantt/samples/07_grid/11_inline_edit_basic.html
https://docs.dhtmlx.com/gantt/samples/07_grid/12_inline_edit_key_nav.html
https://docs.dhtmlx.com/gantt/samples/07_grid/13_custom_mapping.html

Maybe you have some functions that conflict with one another? Please try to reproduce the issue in the following snippet and after it is reproduced, click on the “Share” button and send me the link:
https://snippet.dhtmlx.com/b3e34d9d5

#3

Hi ramil,

I’ve checked that the Keyboard Navigation plug-in was the problem. When I disabled the keyboard navigation plug-in it works fine. I guess that the “enter key event” is making conflict.

Thanks!

1 Like
#4

Hello,
Thank you for the clarification.
Could you reproduce it in the snippet?
If there is a bug, it will help us to fix it.

#5

Sure!

componentDidMount() {

var textEditor = { type: "text", map_to: "text" };
var dateEditor = {
  type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
  max: new Date(2030, 0, 1)
};
var durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 };

gantt.config.multislect = true;
this.initGanttEvents();
gantt.init(this.ganttContainer);
gantt.templates.task_class = gantt.templates.grid_row_class = gantt.templates.task_row_class = function (start, end, task) {
  if (gantt.isSelectedTask(task.id)) return "gantt_selected";
};


if (this.props.tasks) {
  gantt.config.keyboard_navigation = true;
  gantt.config.keyboard_navigation_cells = true;
  gantt.config.columns = [
    { name: "text", label: "Descripción", tree: true, width: "200px", editor: textEditor },
    { name: "start_date", label: "Inicio", align: "center", editor: dateEditor },
    { name: "end_date", label: "Término", align: "center", editor: dateEditor },
    { name: "duration", label: "Duración", align: "center", editor: durationEditor },
    { name: "progress", label: "Avance", align: "center", editor: durationEditor },
  ];

  gantt.parse(this.props.tasks);
}

}

#6

Hello,
Thank you for sending the code. I was able to reproduce it in the snippet:
http://snippet.dhtmlx.com/20509fc86
But the issue happens because you initialize Gantt and then enable keyboard navigation so some Gantt functions don’t know about it(although it works). If you define it before the initialization it should work correctly. And you can even select several tasks, just add a column without inline editor:
http://snippet.dhtmlx.com/084507eed

#7

Thanks Ramil!

It works cool!

#8 
scheduler.showLightbox = function(id) {
		//do ur action
	}

this works for me on keynavigation.