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
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();
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
Yes. Sure.
Please check the attached React App below
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();
}, []);