Our blazing fast Grid component built with pure JavaScript


Post by bharat95 »

Hi,

I want to display dynamic columns from backend, I'm using asp.net. I'm also using static columns, so if I want to load dynamic columns as well how can I do that.

Thanks,
Bharat


Post by tasnim »

Hi,

You could use the AjaxHelper to load the columns
https://bryntum.com/products/calendar/docs/api/Core/helper/AjaxHelper#function-fetch-static

async function main() {
    const response = await AjaxHelper.fetch('data/data.json');
    const { columns } = await response.json();

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',

    project : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },

    columns,

    // Custom task content, display task name on child tasks
    taskRenderer({ taskRecord }) {
        if (taskRecord.isLeaf && !taskRecord.isMilestone) {
            return StringHelper.encodeHtml(taskRecord.name);
        }
    }
});
}

main();

Post by bharat95 »

Hi,

I have declared static columns in ts file and dynamic columns will be loaded from backend. so, I want to display both columns.


Post by tasnim »

Hi,

Here is an example code snippet showing both columns from the backend and static

async function main() {
    // static response
    const staticColsResponse = await AjaxHelper.fetch('data/static.json');
    const { columns : staticCols } = await staticColsResponse.json();
    // server response
    const serverColsResponse = await AjaxHelper.fetch('data/server.json');
    const { columns : serverCols } = await serverColsResponse.json();
    // Combine both columns together
    const columns = [...staticCols, ...serverCols];
    new Gantt({
        appendTo          : 'container',
        dependencyIdField : 'sequenceNumber',
        project           : {
            autoLoad  : true,
            transport : {
                load : {
                    url : '../_datasets/launch-saas.json'
                }
            }
        },
        columns,
        // Custom task content, display task name on child tasks
        taskRenderer({ taskRecord }) {
            if (taskRecord.isLeaf && !taskRecord.isMilestone) {
                return StringHelper.encodeHtml(taskRecord.name);
            }
        }
    });
}

main();

And this is the output

Attachments
Screenshot 2023-06-08 115854.png
Screenshot 2023-06-08 115854.png (37.05 KiB) Viewed 329 times
Screenshot 2023-06-08 115817.png
Screenshot 2023-06-08 115817.png (34.78 KiB) Viewed 329 times
Screenshot 2023-06-08 115710.png
Screenshot 2023-06-08 115710.png (79.75 KiB) Viewed 329 times

Post by bharat95 »

Hi,

I don't want to load static columns from backend, it's already in typescript file. I want to load dynamic columns and combine both static and dynamic columns.


Post by tasnim »

Hi,

You could just import the static columns from the ts file
And after loading data from the backend you can combine it all together in an array and set it to columns of Gantt


Post by bharat95 »

Hi,

Can you provide example or code how can I do that. Thanks in advance.


Post by tasnim »

Yes. Sure.

Please check the attached React App below

Attachments
basic.zip
(2.02 MiB) Downloaded 22 times

Post by bharat95 »

Hi,

how to attach renderer for columns loaded from backend. below is my code

useEffect(() => {
      async function combineCols() {
        const response = await AjaxHelper.fetch('/data/GetColumns');
        const { columns: serverCols } = await response.json();
        const columns = [...serverCols];
        grid.current.instance.columns.data = columns;
      }
      combineCols();
    }, []);

Post by tasnim »

Hi,

You could achieve it like this

serverCols[0].renderer = function () { return 'hello' };

You should add it before adding it to Gantt


Post Reply