Edit task in lightbox with a list of key/value objects?

Gantt
#1

Hello, we are evaluating your commercial version.

We are wondering if it is possible to edit tasks that have child objects. We need to be able to edit user configurable lists. Task would be defined such as:

    public class Task
    {
        public int Id { get; set; }
        public string Text { get; set; }
        ...
        public virtual List<TaskCat> TaskCats { get; set; }
    }
    public class TaskCat  // task categories
    {
        public int Id { get; set; }
        public string CatKey { get; set; }
        public string CatValue { get; set; }
    }

And it looks like we could get this to display correctly using a template like :

    gantt.form_blocks["cat_editor"] = {
        render: function (sns) {
            return "<div class='dhx_cal_ltext' style='height:60px;'>C1&nbsp;"
            + "<input type='text'><br/>C2&nbsp;<input type='text'></div>";
        },
        set_value: function (node, value, task) {
            node.childNodes[0].value = value[0].Key || "k1";
            node.childNodes[1].value = value[0].Value || "v1";
            node.childNodes[3].value = value[1].Key || "k2";
            node.childNodes[4].value = value[1].Value || "v2";
        },
        get_value: function (node, task) {
            var cats = task.taskCats;
            cats[0].Value = node.childNodes[1].value;
            cats[1].Value = node.childNodes[4].value;
            return cats;
        },
        focus: function (node) {
            var a = node.childNodes[1];
            a.select();
            a.focus();
        }
    };
    gantt.config.lightbox.sections = [
		{ name: "description", height: 70, map_to: "text", type: "textarea" },
		{ name: "Cats", height: 50, map_to: "taskCats", type: "cat_editor" },
		{ name: "time", height: 72, type: "duration", map_to: "auto" }
    ];

So getting the data works, but when Save is called the values for child list task.taskCats are all string values like “[object Object],[object Object]”.

In other words, the FormCollection has 1_taskCats coming back as “[object Object]” instead of a usable value or JSON string. And I don’t see anything like 1_taskCats_1_CatValue.

Do you have a suggestion on a way to fix this or a better alternative?

#2

FYI… I put a work around in place…

In onAfterTaskUpdate I convert the child object to JSON and assign it to a string property on the task. Then when the Save posts, I can convert the form post back to the actual object.

This seems to work, but let me know if you have a better solutions. Thanks

#3

Hello,
dataprocessor won’t serialize non primitive values, so you’ll need to stringify them manually before sending.
The possible way is to use events of the dataProcessor - component that sends ajax to the server. You can stringify value before it’s sent to the server and parse when server returns a response (currently the dataprocessor does not provide the temporary data object, so you have to modify property of the task and revert it back)

docs.dhtmlx.com/api__dataprocess … event.html
docs.dhtmlx.com/api__dataprocess … event.html

Also, make sure that set_value/get_value works correctly with dom elements, e.g. node.childNodes[0].value in the set_value returns a text node which does not have a value property

I’ve tried following code with the test data, it seems working:[code]var tasks = {
data:[
{id:1, text:“Project #2”, start_date:“01-04-2013”, duration:18,order:10,
progress:0.4, open: true, TaskCats:[{Key:“k1”, Value:“11”}, {Key:“k2”, Value:“22”}]},
{id:2, text:“Task #1”, start_date:“02-04-2013”, duration:8, order:10,
progress:0.6, parent:1, TaskCats:[{Key:“k3”, Value:“33”}, {Key:“k4”, Value:“44”}]},
{id:3, text:“Task #2”, start_date:“11-04-2013”, duration:8, order:20,
progress:0.6, parent:1, TaskCats:[{Key:“k5”, Value:“55”}, {Key:“k6”, Value:“66”}]}
],
links:[]
};
gantt.form_blocks[“cat_editor”] = {
render: function (sns) {
return "

C1 "
+ "
C2 
";
},
set_value: function (node, value, task) {
var cats = task.TaskCats;
var inputs = node.getElementsByTagName(“input”);
for(var i=0; i < inputs.length; i++)
if(cats[i])
inputs[i].value = cats[i].Value || (“v” + (i+1)); 
},
get_value: function (node, task) {
	var cats = task.TaskCats;

	var inputs = node.getElementsByTagName("input");
	for(var i=0; i < inputs.length; i++)
		if(cats[i])
			cats[i].Value = inputs[i].value ;
},
focus: function (node) {
	return true;
}

};
gantt.config.lightbox.sections = [
{ name: “description”, height: 70, map_to: “text”, type: “textarea” },
{ name: “Cats”, height: 50, map_to: “auto”, type: “cat_editor” },
{ name: “time”, height: 72, type: “duration”, map_to: “auto” }
];

gantt.init(“gantt_here”);
var dp = new dataProcessor(‘url’);
dp.init(gantt);

dp.attachEvent(“onBeforeUpdate”,function(id,status){
if(gantt.isTaskExists(id)){
var task = gantt.getTask(id);
task.TaskCats = JSON.stringify(task.TaskCats);
}
return true;

});
dp.attachEvent(“onAfterUpdate”,function(id,status){
if(gantt.isTaskExists(id)){
var task = gantt.getTask(id);
task.TaskCats = JSON.parse(task.TaskCats);
}
return true;
});[/code]