How to read data from database for customisable columns

Gantt
#1

Hi, I have setup gantt with Laravel which works good with predefine columns on both side backend and front end.
My task table structure is different with adding some more columns

CREATE TABLEpersons( idint(11) PRIMARY KEY AUTO_INCREMENT NOT NULL, textvarchar(191) COLLATE utf8mb4_unicode_ci NOT NULL, durationint(11) NOT NULL, progressdouble(8,2) NOT NULL, start_datedatetime NOT NULL, parentint(11) NOT NULL, created_attimestamp NULL DEFAULT NULL, updated_attimestamp NULL DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

On the front end I have 3 Columns Task Name , Owner and Progess

I have added the record for Owner it get work. But now I want to retrieve it from database and show it on gant view.

  public function store(Request $request){

        $task = new Persons();
        $task->text = $request->text;
        $task->duration = $request->duration;
        $task->progress = $request->has("progress") ? $request->progress : 0;
        $task->owner = $request->owner_id;
        $task->parent = $request->parent;

        $task->save();

        return response()->json([
            "action"=> "inserted",
            "tid" => $task->id
        ]);

gantt.js file

gantt.config.columns = [
  { name: "text", label: "Task name", width: "*", tree: true },
  {
    name: "owner_id",
    label: "Owner",
    width: 65,
    resize: true,
    template: function (task_object) {
      if (task_object.owner_id) {
        return find_by_id(task_object.owner_id).label;
      }
    },
  },
  { name: "progress", label: "Progress", align: "center" },
  { name: "duration", label: "Duration", align: "center" },
  { name: "add", label: "", width: 44 },
];

I have use php connector but did not work if anyone can help me with that I will be very thankful.

#2

Hello Hassan,
Usually, it should be enough to specify the tables in the get function to load the data:
https://docs.dhtmlx.com/gantt/desktop__howtostart_php_laravel.html#step4loadingdata

When you load the data from the server, it will return all properties:

950×583 74.7 KB

The store function you shared in the previous message is used only to save the data on the server when you add a new task.

You need to check the data you receive in the server response.

Also, if you use the Laravel framework, you don’t need to use the PHP connector, as it can only do basic things.

#3

thank you so much for replay
I get your point now I have stuck in render data in combo box of light box

I can use gantt.load("api/people");
to load the data

gantt.config.lightbox.sections = [
  {
  name: "owner",
    height: 40,
    map_to: "owner_id",
    type: "select",
    options: gantt.serverList("staff"),
  },

];

api route

Route::get(‘/people’, [GanttController::class, ‘people’]);

controller

 public function people()
    {
        $people = User::all('id', 'first_name');

        return response()->json([
            "people" => $people
        ]);
    }

I get the data but not render in dropdown menu it says
image

can you please help me how to populate dropdown from database data

#4

Hello Hassan,
Gantt expects the data or tasks name for the array with tasks:
https://docs.dhtmlx.com/gantt/desktop__loading.html#dataproperties

If you use a different name, Gantt will throw an error, and it is expected.
It can be reproduced in the snippet:
https://snippet.dhtmlx.com/2nc1gpa9

And it is necessary to specify the data and links array. If the tasks and links are not loaded, you need to specify an empty array along with all other custom arrays.
If you store the array with people in the database, and you want to load it from the server with the load method, the server needs to return it inside the collections object:
https://docs.dhtmlx.com/gantt/desktop__supported_data_formats.html#jsonwithcollections

Here is the snippet that demonstrates how it works:
https://snippet.dhtmlx.com/kefuru5k