Lightbox Control

Gantt
#1

How to get data into lightbox select option and when we change option how should it update in db.

$.get("/api/hrm/leaves/", function(data) {
gantt.parse({‘data’:data});
gantt.refreshData()
});
this is the api iam using for getting data.

gantt.config.lightbox.sections = [
{name: “reason”, height: 38, map_to: “reason”, type: “template”, focus: true},
{
name: “leave_status”, height: 42,map_to: “leave_status”,type: “select”,options:gantt.serverList(“leave_status”)
},

];

api format:

{
“id”: 7,
“employee”: {
“id”: 1,
“employee_id”: “1101”,
“photo”: “/media/profiles/photo/admin.jpg”,
“nick_name”: “Nari”,
“official_name”: “Narendar”,
“department”: {
“id”: 1,
“name”: “RND”
},
“designation”: {
“id”: 1,
“name”: “Software Developer”
},
“location”: {
“id”: 1,
“name”: “Chennai”
}
},
“reason”: “Going to Home”,
“duration”: 3.0,
“applied_date”: “2019-02-19”,
“start_date”: “2019-03-19”,
“end_date”: “2019-03-21”,
“notes”: null,
“leave_type”: {
“id”: 2,
“name”: “Casual Leave”
},
“leave_status”: {
“id”: 3,
“name”: “Rejected”
}
}

first is how to get leave_status name in select options format,
second is how to update when an option in changed in lightbox.

#2

Hello Narendar,
Gantt uses key property to define the ID of the entry, and label for the displayed text:
https://snippet.dhtmlx.com/cbc6ee5c0
If you want to get the currently selected option, you can use gantt.getLightboxValues(); command:
https://docs.dhtmlx.com/gantt/api__gantt_getlightboxvalues.html

When you click on the “Save” button, the task should obtain the property of the selected option, you need to have a column for that option in the database table.

#4

thanks for the response, but how to set the id for key and label property, id and label which is from db, right now we are setting it by hardcoding. in my case the options are in db i want those options displayed on lightbox.

#5

Hello Narendar,
You can use find_by_id function to make an array with IDs and Labels. It will return a label when you specify an ID:

function find_by_id(owner_id) {
    for (var i = 0; i < gantt.owners.length; i++){
        if (gantt.owners[i].key == owner_id) return gantt.owners[i]
    }
};

https://snippet.dhtmlx.com/10c4986ee

And if you use a server list, you are able to update the values that are displayed in the lightbox.
Here are examples:
https://snippet.dhtmlx.com/0c96ca6e1
https://snippet.dhtmlx.com/deeac1a93

#6

snippet
snippet1917×941 91.7 KB

iam having also in db.

#7

Hello Narendar,
You need to find a way to load the data from the database and save it to a JSON variable. Then you need to use the server list to update the collection:

gantt.updateCollection("task_options", temp_array);

And you can use “findById” function to get the label by giving the ID:

function byId(list, id) {
		for (var i = 0; i < list.length; i++) {
			if (list[i].key == id)
				return list[i].label || "";
		}
		return "";
}

If that is still not what you want, I need more information on how it is saved in your database and how you imagine it should be loaded.

#8

thanks for the response ramil.
But now iam having another problem. after saving the lightbox value the task from gantt disappearing and not refreshing automatically after manually refreshing the page its appearing with updated value, how to solve it?

gantt.attachEvent("onLightboxSave", function (id, task) {
        var status = gantt.getLightboxSection('leave_status');
        var value = status.getValue();
        url = '{% url "leave_edit" leave_id=0 %}'.replace('0', task.id);
        $.ajax({
            url: url,
            type: "PUT",
            dataType: 'application/json',
            data: {
                "leave_status": value,
            },
        });

        return true;
    } );
#9

Hello Narendar,
Unfortunately, I couldn’t reproduce it, and it is hard to suggest what might be wrong as I don’t see your code. Please, reproduce the issue in a snippet, then click on the “Share” button and copy the link.
Or send me your project (or a new project where I can reproduce the issue).