Can't save tasks after being imported

Gantt
#1

hello,
i already tried to code the import excel as in the documentation, i can load my file, task and progress bar looks good, BUT all of the task from the imported file did not saved on database. How can i put them in the database?
next,
i have this priority option, i used to gave the key in integer data 0 for critical, 1 for high, etc. but it’s going to make the user become confused because usually they kept a priority as text like critical high etc. so i need it to be varchar datatype as on below. But it’s also become stressful because “critical” and “Critical” and “CRITICAL” is not same, should i convert it with strtolower() function and change my keys with lower case word?

gantt.serverList(“priority”, [
{ “key”:“Critical”, “label”:“Critical”},
{ “key”:“High”,“label”:“High”},
{ “key”:“Medium”, “label”:“Medium”},
{ “key”:“Low”, “label”:“Low”}]);

last,
i used to ask about add new option by user on selection box, and i used the jQuery that ramli said, here is the link -> HELP ME! need Selection box with input text

gantt.form_blocks["custom_editor"] = {
render: function (sns) {
  return '<input type="text" name="color" height="18px">';
},set_value: function (node, value, task) {
      $('input[name="color"]').amsifySuggestags({
    type : 'amsify'});
  node.value = task.person || "";
},get_value: function (node, task) {
  return node.value;}};

gantt.attachEvent("onLightbox", function (task_id){
    var task = gantt.getTask(task_id);
    gantt.getLightboxSection('person').setValue(task.options);});
gantt.config.lightbox.sections = [
        {name: "description", height:22, map_to: "text", type: "textarea"},
        {name: "priority", map_to: "priority", type: "select", options: gantt.serverList("priority")},
        {name: "person", height:18, width: 80, map_to: "person", type: "custom_editor"},
        {name: "time", type: "duration", map_to: "auto", time_format: ["%d", "%m", "%Y"]},
        {name: "deadline", map_to: {start_date: "deadline"},type: "duration_optional",button: true,single_date: true
        }];
         gantt.config.columns = [
            {name:"text", label:"Task", tree:true, width:"190"},
            {name: "status", label: "Status", align: "center", template: function (item) {
              if (item.progress == 1){
                return "Complete";}
              if (item.progress < 0.00009){
                return "Not started yet";}
              if (item.progress >0 && item.progress <1){
                return "On going";}}},
            {name:"priority",   label:"Priority",   align: "center",  width:"55", template: function(item) {
              return gantt.getLabel('priority', item.priority)}},
            {name:"person", label:"Holder", width:"83", align: "center", autofit:true, get_value: function (node, task) { return node.value;}},
            {name:"add", id:"add", label:"", width:"35" }];

and now it’s become an obstacle when user import a file. It’s look fine after importing the file, but after updating the task on lightbox (responsible person is not being change on this case) the name of people who is responsible for the task is gone, so the user need to put the name again, any solution?
Help me please!

#2

Hello Farroh,

i already tried to code the import excel as in the documentation, i can load my file, task and progress bar looks good, BUT all of the task from the imported file did not saved on database. How can i put them in the database?

When the data is imported, it is saved in a variable that you can use as you wish.
In our samples, we use the gantt.parse command that doesn’t actually add tasks in the database. You need to use the addTask command to add those tasks in the database:
https://docs.dhtmlx.com/gantt/api__gantt_addtask.html
Here is an example of how it might be implemented:
https://snippet.dhtmlx.com/651216908

i have this priority option, i used to gave the key in integer data 0 for critical, 1 for high, etc. but it’s going to make the user become confused because usually they kept a priority as text like critical high etc. so i need it to be varchar datatype as on below. But it’s also become stressful because “critical” and “Critical” and “CRITICAL” is not same, should i convert it with strtolower() function and change my keys with lower case word?

If you want to use string values instead of numbers, you can do that, but the values in the data and in the list with the options should match. So, yes, you need to convert the values to lower case.

It’s look fine after importing the file, but after updating the task on lightbox (responsible person is not being change on this case) the name of people who is responsible for the task is gone, so the user need to put the name again, any solution?

Thank you for letting me know about that issue. Looks like, I forgot to add a parameter to save the options, sorry. Here is the correct string:

get_value: function (node, task) {
  return node.value || task.options;
},

And here is the updated snippet:
http://snippet.dhtmlx.com/1867d0f9b

#3

sorry, but i used dnd for importing excel file and i don’t know where to place the addTasks and addLinks, and really sorry for mistaken your name as ramli :persevere:

function loadTable(mapping, data){
var ganttDataset = {
  data:[],
  links: []
};

data.forEach(function(item){
  var copy = {};
  for(var i in item){
if(mapping[i]){
  copy[mapping[i]] = item[i];
}else{
  copy[to_snake_case(i)] = item[i];
}

copy.open = true;
if(copy.wbs){
  var wbs = copy.wbs + "";
  copy.id = wbs;
  var parts = wbs.split(".");
  parts.pop();
  copy.parent = parts.join(".");
}
  }
  ganttDataset.data.push(copy);
});

gantt.clearAll();
gantt.parse(ganttDataset);
  }
  //import dnd
  if (!window.FormData) {
gantt.error("Your browsers does not support Ajax File upload, please open this site in a modern browser");
  }

  gantt.config.static_background = true;

  var fileDnD = fileDragAndDrop();
  fileDnD.fileTypeMessage = "Only XLSX or XLS files are supported!";
  fileDnD.dndFileTypeMessage = 'Please try XLSX or XLS project file <br> Your current work will be replaced with the imported file';
  fileDnD.dndHint = 'Drop Excel file into Gantt <br> Your current work will be replaced with the imported file';
  fileDnD.mode = "excel";
  fileDnD.init(gantt.$container);

  function sendFile(file) {
fileDnD.showUpload();
upload(file, function () {
  fileDnD.hideOverlay();
})
  }

  function to_snake_case(name){
return (name + "").toLowerCase().replace(/ /, "_");
  }
  function loadTable(mapping, data){
var ganttDataset = {
  data:[],
  links: []
};

data.forEach(function(item){
  var copy = {};
  for(var i in item){
if(mapping[i]){
  copy[mapping[i]] = item[i];
}else{
  copy[to_snake_case(i)] = item[i];
}

copy.open = true;
if(copy.wbs){
  var wbs = copy.wbs + "";
  copy.id = wbs;
  var parts = wbs.split(".");
  parts.pop();
  copy.parent = parts.join(".");
}
  }
  ganttDataset.data.push(copy);
});
gantt.clearAll();
gantt.parse(ganttDataset);}

  function getOptions(selectedIndex){
return ["text", "start_date", "duration", "end_date", "priority", "person", "deadline", "progress", "status"].map(function(name, index){
  return "<option value='"+name+"' "+(selectedIndex == index ? "selected":"")+">" + name +"</option>";
}).join("");
  }

  function upload(file, callback) {
gantt.importFromExcel({
  server:"https://export.dhtmlx.com/gantt",
  data: file,
  callback: function (project) {
if (project) {
  var header = [];
  var headerControls = [];
  var body = [];
  project.forEach(function(task){
    var cols = [];
    if(!header.length){
      for(var i in task){
        header.push(i);}
      header.forEach(function(col, index){
        cols.push("<th>" + col + "</th>");
        headerControls.push("<td><select data-column-mapping='"+col+"'>"+getOptions(index)+"</select>")});
      body.push("<tr>" + cols.join("") +  "</tr>");
      body.push("<tr>" + headerControls.join("") +  "</tr>");}
    cols = [];
    header.forEach(function(col){
      cols.push("<td>" + task[col] + "</td>");});
    body.push("<tr>" + cols.join("") +  "</tr>");});
  var div = gantt.modalbox({
    title:"Assign columns",
    type:"excel-form",
    text: "<table>" + body.join("") + "</table>",
    buttons: [
      { label:"Save",   css:"link_save_btn",   value:"save" },
      { label:"Cancel", css:"link_cancel_btn", value:"cancel" }],
    callback: function(result){
      switch(result){
        case "save":
          var selects = div.querySelectorAll("[data-column-mapping]");
          var mapping = {};
          selects.forEach(function(select){
            mapping[select.getAttribute("data-column-mapping")] = select.value;});
          loadTable(mapping, project);
          break;
        case "cancel":
          break;}}});}
if (callback)
  callback(project);}});}
  fileDnD.onDrop(sendFile);
#4

Hello Farroh,
If you used the code from the official sample, you need to put addTask and addLink strings at the end of the loadTable function (instead of gantt.parse(ganttDataset)).
Here are the snippet and the video:
http://snippet.dhtmlx.com/5800f61e7
https://files.dhtmlx.com/30d/5c439b0441026a9bad25a1a91b9ddecf/vokoscreen-2019-07-31_14-08-03.avi