Agent-readable demo data

Title
Task Filtering (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox
Tree
DayPilot JavaScript Sandbox
Catalog root
Default
Description
Read more about Gantt Chart row/task filtering.

Inline demo script 1

const dp = new DayPilot.Gantt("dp");

        dp.onRowFilter = function (args) {
            const query = args.filterParam.query;

            if (!args.task.data.text.toUpperCase().includes(query.toUpperCase())) {
                args.visible = false;
            }

        };

        dp.startDate = DayPilot.Date.today().addDays(-1);
        dp.days = 60;

        // generate and load sample tasks
        let start = DayPilot.Date.today();
        let last = null;
        for (let i = 0; i < 5; i++) {
            const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
            const end = start.addDays(duration);

            const e = new DayPilot.Task({
                start: start,
                end: end,
                id: DayPilot.guid(),
                text: "Task " + i,
                tags: {
                    info: "info text"
                },
                children: [
                    {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Subtask 1",
                        complete: Math.floor(Math.random() * 101) // 0 to 100
                    },
                    {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Subtask 2",
                        complete: Math.floor(Math.random() * 101) // 0 to 100
                    },
                    {
                        start: end,
                        id: DayPilot.guid(),
                        text: "Milestone 1",
                        type: "Milestone"
                    }

                ]
            });

            dp.tasks.add(e);

            if (last) {
                dp.links.add(new DayPilot.Link({
                    id: DayPilot.guid(),  // optional
                    from: last,
                    to: e.id(),
                    type: "FinishToStart"
                }));
            }
            last = e.id();
            start = end;

        }

        dp.columns = [
            {
                title: "Name",
                width: 50,
                property: "text"
            },
            {
                title: "Info",
                width: 50,
                property: "info"
            },
            {
                title: "Duration",
                width: 50
            }
        ];

        dp.onBeforeRowHeaderRender = function (args) {
            const duration = args.task.duration();
            const html = duration.toString("d") + "d " + duration.toString("h") + "h";
            args.row.columns[2].html = html;
        };

        dp.init();


        const app = {
            elements: {
                filter: document.querySelector("#filter"),
                clear: document.querySelector("#clear")
            },
            init() {
                const elements = app.elements;
                elements.filter.addEventListener("keyup", function() {
                    app.filter();
                });

                elements.clear.addEventListener("click", function(ev) {
                    ev.preventDefault();
                    elements.filter.value = "";
                    app.filter();
                });
            },
            filter() {
                // filter is applied using onTaskFilter event handler
                dp.rows.filter({
                    query: app.elements.filter.value
                });
            }
        };

        app.init();