Skip to main content

Loading and storing data

Preparing data to load

There are the following types of information which can be loaded into DHTMLX To Do List:

You can prepare data in a separate file. Here is an example of an appropriate data set:

data.js
function getData() {

// data for tasks
const tasks = [
// data for tasks of the "widgets" project
{
"id": "widgets",
"project": "widgets",
"text": "\u{1F389} DHTMLX widgets"
},
{
"id": "gantt",
"project": "widgets",
"parent": "widgets",
"text": "Gantt"
},
{
"id": "scheduler",
"project": "widgets",
"parent": "widgets",
"text": "Scheduler"
},
{
"id": "diagram",
"project": "widgets",
"parent": "widgets",
"text": "Diagram"
},
// data for tasks of the "introduction" project
{
"id": "temp://1652991560212",
"project": "introduction",
"text": "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List."
},
{
"id": "1652374122964",
"project": "introduction",
"text": "You can assign task performers and due dates using the menu.",
"assigned": [
"user_2",
"user_1",
"user_3",
],
"due_date": "2033-03-08T21:00:00.000Z"
},
{
"id": "1652097809881",
"project": "introduction",
"text": "You can create tasks with an infinite number of subtasks.",
"assigned": [
"user_2"
],
"collapsed": false
},
{
"id": "1652097809882",
"project": "introduction",
"parent": "1652097809881",
"text": "Use the Tab and Shift + Tab keys for this.",
"checked": false
},
{
"id": "1652097809887",
"project": "introduction",
"parent": "1652097809881",
"text": "Select and press Ctrl (Cmd) + Arrow up / Arrow down to change the task order.",
"checked": false
},
// more task objects
];

// data for users
const users = [
{
"id": "user_1",
"label": "Don Smith",
"avatar": "../avatar_02.jpg"
},
{
"id": "user_2",
"label": "Nadia Chasey",
"avatar": "../avatar_05.jpg"
},
{
"id": "user_3",
"label": "Mike Young",
"avatar": "../avatar_21.jpg"
},
// more user objects
];

// data for projects
const projects = [
{
"id": "introduction",
"label": "Introduction to DHTMLX To Do List"
},
{
"id": "widgets",
"label": "Our widgets"
},
// more project objects
];

return { projects, users, tasks };
}

To be able to load and operate the data in your project, include the file on the page:

index.html
<script src="../data.js"></script>

And apply the object destructuring:

index.js
const { tasks, users, projects } = getData();

Loading from local source

Loading data on initialization

You can load a predefined data into To Do List on the initialization stage in the following way:

index.js
const { ToDo, Toolbar } = todo;
const { tasks, users, projects } = getData();

const list = new ToDo("#root", {
tasks,
users,
projects
});

Loading data after initialization

To load data from a local data source after initialization of the To Do List, use the parse() method:

index.js
const { ToDo, Toolbar } = todo;
const { users, projects, tasks } = getData();

const list = new ToDo("#root", {});

const toolbar = new Toolbar("#toolbar", {
api: list.api,
});

// parse data into the component
list.parse({
tasks,
users,
projects
});

Saving and restoring state

To save the current state of a To Do, use the serialize() method. It converts the data of the To Do List into a JSON object.

const state = list.serialize();
// {
// tasks: [{...}, {...}, ...],
// users: [{...}, {...}, ...],
// projects: [{...}, {...}, ...],
// tags: [],
// activeProject: string,
// }

Then you can parse the data stored in the saved state array to a different To Do List. For example:

// creating a new To Do
const list2 = new ToDo("#root2", {});

// parsing the state of To Do List into another To Do List
list2.parse(state);