Our state of the art Gantt chart


Post by shimnx »

When I export, I have problems with two fields, Name and Status, maybe because I have customized these two fields. Is there any solution?

 columns: [
        { type: 'wbs' },
        {
            type: 'name', width: 250,
            htmlEncode: false,
            leafIconCls: null,
            renderer(
                { record, value, size }:
                    { record: SchedulerResourceModel & { [key: string]: any }; value: string; size: { height: number; color: string } }
            ): string {
                // Parent rows are employees
                if (record.remark) {
                    return `<span class='contentIcon'></span> ${encodeHtml(value)}`;
                } else {
                    return `<i class='b-tree-icon b-icon b-icon-tree-leaf'></i> ${encodeHtml(value)}`;
                }


        }
    },
    { type: 'startdate' },
    { type: 'enddate' },
    { type: 'effort' },
    { type: 'finishcolumn' },
    { type: 'duration' },
    {
        type: 'resourceassignment', width: 120, showAvatars: true, itemTpl: ({ resourceName }) => resourceName,

        editor: {

            picker: {
                listeners: {
                    async selectionChange(changed) {
                        //from(iterable) —— 把它的参数转换成一个 Observable 实例。 该方法通常用于把一个数组转换成一个(发送多个值的)可观察对象。
                        const myObservable2 = from([1, 2, 3]);
                        const myObserver2 = myObservable2.subscribe(res => {
                            console.log('使用subscribe订阅的结果:', res);
                        })

                        const myObserver3 = myObservable2.toPromise().then(res => {
                            console.log('使用toPromise转化的结果:', res);
                        })

                        console.log(changed);
                        if (changed.action == "select") {
                            const result = await MessageDialog.confirm({
                                title: 'The big question',
                                message: 'Do you really want to select?',
                                okButton: 'Yes',
                                cancelButton: 'No'
                            });

                            if (result != MessageDialog.okButton) {
                                this.deselectRow(changed.selected[0])
                            }
                        }
                        // if (changed.action == "deselect") {
                        //     const result = await MessageDialog.confirm({
                        //         title: 'The big question',
                        //         message: 'Do you really want to deselect?',
                        //         okButton: 'Yes',
                        //         cancelButton: 'No'
                        //     });

                        // if (result != MessageDialog.okButton) {
                        //     this.selectRow(changed.deselected[0])
                        // }
                        // }
                    }
                },
                selectionMode: {
                    rowCheckboxSelection: true,
                    multiSelect: false,
                    showCheckAll: false,

                },

                features: {
                    filterBar: true,
                    group: 'resource.orgCode',
                    headerMenu: false,
                    cellMenu: false,
                },
                // The extra columns are concatenated onto the base column set.
                // columns: [{
                //     text: 'Calendar',
                //     // Read a nested property (name) from the resource calendar
                //     field: 'resource.name',
                //     filterable: false,
                //     editor: false,
                //     width: 200,
                // }],
            },

        }
    },
    { type: 'percentdone', showCircle: true, width: 70 },
    {
        type: 'predecessor',
        width: 112
    },
    {
        type: 'successor',
        width: 112
    },
    { type: 'schedulingmodecolumn' },
    { type: 'calendar' },
    { type: 'constrainttype' },
    { type: 'constraintdate' },
    { type: 'statuscolumn' },
    {
        type: 'date',
        text: 'Deadline',
        field: 'deadline'
    },
    { type: 'addnew' }
],
Attachments
example.zip
(286.9 KiB) Downloaded 34 times
媒体3.mp4
(4.36 MiB) Downloaded 36 times

Post by alex.l »

Please check docs https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer
There is isExport parameter that you can check and return simple text from renderer while exporting to avoid not required HTML code.

All the best,
Alex


Post by shimnx »

PrioColumn is my custom column, and it doesn't seem to be able to export, so it's empty in excel

columns:[
 { type: 'statuscolumn' },
            { type: 'PrioColumn'},
            { type: 'GroupColumn' },
]

// Bryntum umd lite bundle comes without polyfills to support Angular's zone.js
import { Column, ColumnStore } from '@bryntum/gantt/gantt.lite.umd.js';

/**
 * @module PrioColumn
 */

/**
 * A column showing the status of a task
 *
 * @extends Gantt/column/Column
 * @classType PrioColumn
 */
export default class PrioColumn extends Column {

    static get $name() {
        return 'PrioColumn';
    }

    static get type() {
        return 'PrioColumn';
    }

    static get isGanttColumn() {
        return true;
    }

    static get defaults() {
        return {
            // Set your default instance config properties here
            field      : 'PriorityName',
            text       : 'Priority',
            cellCls    : 'b-status-column-cell',
            htmlEncode : false,
            editor     : false,

};
    }

//endregion

renderer({ record,isExport }) {
    const Priority = record.PriorityName;
    console.log(Priority,isExport)
    if(isExport){
        return Priority
    }else{
        return Priority ? {
            // tag       : 'i',
            className : `${Priority}`,
            html      : Priority
        } : '';
    }

}

}

ColumnStore.registerColumnType(PrioColumn);

Attachments
屏幕截图 2022-12-08 133809.png
屏幕截图 2022-12-08 133809.png (2.7 KiB) Viewed 522 times

Post by mats »

Can you please upload a full test case with column definition and JSON dummy data?


Post by shimnx »

This is my example. In addition, I would like to ask why there is no style when I export pdf, which is also reflected in this example. thank you

Attachments
example.zip
(289.16 KiB) Downloaded 23 times

Post by alex.l »

Please see reply here viewtopic.php?p=115059#p115059
Let us know when you fixed styling problems, we will check columns issues if it won't fix.

All the best,
Alex


Post by shimnx »

The problem of style has been solved. Could you please help me look at this problem? Thank you


Post by alex.l »

Sure, please attach updated test case, we will debug it.

All the best,
Alex


Post Reply