Label option disabled

Gantt
#1

hello, is that possible to disabled only 1 option among label’s options? here is my code

gantt.serverList(“status”, [
{ label:“Not started yet”, key:0},
{ label:“On going”, key:1},
{ label:“Complete”, key:2},
{ label:“Postponed”, key:3}]);
gantt.config.columns = [{name: “status”, label: “Status”, align: “center”, template: function (item) {
if (item.status == 2){
item.progress = 1
return “Complete”;}
if (item.progress < 0.00009){
item.status == 0
return “Not started yet”;}
if (item.progress >0 && item.progress <1){
item.status == 1
return “On going”;}
if (item.progress > 0 && item.progress <1){
item.status == 3
return “Postponed”;}}
}];

gantt.locale.labels.section_status = “Status”;
gantt.config.lightbox.sections = [{name: “status”, map_to: “status”, type: “select”, options: gantt.serverList(“status”)}];

so, i want to allow user to choose their task’s status: “not started yet” if the task still didn’t have any progress, i give it condition item.progress <0.00009 so the progress slider still can be drag around and return “on going” status, but the problem is even after i drag it around the option on the section lightbox didn’t change into “on going” status and still show “not started yet” status. So i want to dissabled “not started yet” status if only the progress is already going up to > 0, or is there any solution that more reliable than this?
and also i want to provide “postponed” status, this option can be selected if only the progress >0 & <1, and obviously i’m struggling because it keeps showing “on going” status even user already choose “postponed” status, and the task should be grayed and the progress slider will be dissabled until user change the status into “on going” again. Help me…

#2

Hello Farroh,
You can use the onLightbox event handler to hide or show some options in the lightbox:
https://docs.dhtmlx.com/gantt/api__gantt_onlightbox_event.html
There, you can hide the elements by using Javascript:

  if (0.01 < task.progress && task.progress < 1){
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[0].style.display = "none";
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[3].style.display = "initial";
  }
  if (task.progress == 1) {
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[0].style.display = "none";
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[3].style.display = "none";
  }
  if (task.progress < 0.01 && task.status != 3) {
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[0].style.display = "initial";
    document.getElementsByClassName("gantt_cal_ltext")[1].childNodes[0].childNodes[3].style.display = "none";
  }

To update the progress by changing the status, you can use the onLightboxSave event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onlightboxsave_event.html

Also, it is better to update the values in the onTaskDrag event handler than in the gantt.config.columns property, because in that case, you update the values only when you drag or resize the task:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskdrag_event.html

To change the style color, you need to check the status in the task_class template and return the class name:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html
Then, you can add the CSS rules to change the color and hide the progress drag:

.postponed_task{
background: lightgray;
}
.postponed_task .gantt_task_progress_drag{
  display: none !important;
}
.gantt_task_progress{
  background:rgba(33,33,33,0.17);
}

Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/f919d0cfd

#3

wow you really know ho to fix my problems, thankyou :star_struck: