Our blazing fast Grid component built with pure JavaScript


Post by postman »

let tree = new TreeGrid({
                adopt : 'container',
                fullRowRefresh: true,
                showRemoveRowInContextMenu: false,
                cls: "accounts-table",
                features : {
                    cellEdit   : true,
                    rowReorder : true,
                    stripe     : true,
                    summary    : true,
                    filter     : true,
                    sort: {
                        multiSort: false
                    },
                    excelExporter : {
                        dateFormat : "YYYY-MM-DD",
                        exporterConfig : {
                            columns : ["title", "buyer__username", "status"]
                        }
                    },
                },
                columns : [
                    {
                        text        : 'Name',
                        field       : 'title',
                        flex        : 3,
                        type        : 'tree',
                        cls : "title-column",
                        // cellCls: "test-class",
                        editor : false,
                        cellMenuItems : [
                            { text : 'Open', icon : 'b-fa b-fa-comment', cls : 'color', weight : 201, onItem : ({ item }) => {
                                this.openModalFormChildElement(item.record);
                                }
                            }
                        ],
                        sum             : true,
                        summaryRenderer : ({sum}) => `Total: ${this.commonStatistic.numberOfAccounts}`
                    },
                    {
                        text    : 'open',
                        width   : 100,
                        type    : 'widget',
                        widgets : [{
                            type     : 'button',
                            icon     : 'b-fa b-fa-bars',
                            cls      : 'b-blue b-raised open-btn-column',
                            text: 'Open',
                            onAction : ({ source : btn }) => {
                                this.openModalFormChildElement(btn.cellInfo.record);
                            }
                        }]
                    },
                    { text : 'ParentIndex', field : 'parentIndex', width : 40, hidden : true },
                    { text : 'Accounts', field : 'ad_accounts', sortable : false, editor : false },
                    {
                        text : 'Buyer',
                        field : 'buyer__username',
                        width  : '8em',
                        cls : "buyer-column",
                        editor : {
                            type : 'dropdown',
                            items : this.getBuyersWithoutAllBuyers() ,
                        }
                    },
                    {
                        text : 'Status',
                        field : 'status',
                        flex : 2,
                        cls : "status-column",
                        editor : {
                            type : 'dropdown',
                            items : this.getStatusesWithoutAllStatus()
                        }
                    },
                    { text : 'Revenue', field : 'revenue', flex : 1, editor : false, sortable : true, sum : true, summaryRenderer : ({sum}) => `${this.commonStatistic.revenue}` },
                    { text : 'Spend', field : 'spend', flex : 1, editor : false, sortable : true, sum : true, summaryRenderer : ({sum}) => `${this.commonStatistic.spend}` },
                    { text : 'Warming expenses', field : 'warming_expenses', width: 180, editor : false, sortable : true, sum : true, summaryRenderer : ({sum}) => `${this.commonStatistic.warming_expenses}` },
                    { text : 'Card expenses', field : 'card_expenses', flex : 1, editor : false, sortable : true, sum : true, summaryRenderer : ({sum}) => `${this.commonStatistic.cards_expenses}` },
                    { text : 'Profit', field : 'profit', flex : 1, editor : false, sortable : true, sum : true, summaryRenderer : ({sum}) => `${this.commonStatistic.profit}` },
                    { text : 'Comment', field : 'media_buyer_comment', flex : 2, editor : true, cls: "comment-column", sortable : true}
                ],
                store
            });

How i can remove buttons in column "Open" where is children output. Buttons in column "Open" must be only in parent row.


Post by pmiklashevich »

Hello,

WidgetColumn doesn't have an option to control visibility for the widgets in the cell. Renderer is a private. I've opened a feature request to add such support: https://github.com/bryntum/support/issues/966

You can use css to hide corresponding widget, for example:

.b-grid-row:not(.b-tree-parent-row) .open-btn-column {
    display : none;
}

Or better to use ActionColumn instead:

{
    text    : 'open',
    width   : 100,
    type    : 'action',
    actions : [{
        cls     : 'b-fa b-fa-bars open-btn-column',
        tooltip : ({ record }) => `Open details for ${record.name}`,
        visible : ({ record }) => record.isParent,
        onClick : ({ record }) => {
            console.log(record);
        }
    }]
},
Снимок экрана 2020-06-19 в 13.29.57.png
Снимок экрана 2020-06-19 в 13.29.57.png (147.6 KiB) Viewed 1265 times

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by postman »

Thanks for answer, i try using your solution, but if children isParent, then action link views too. Does anything else solution?
https://ibb.co/jZFkprg


Post by postman »

Ок, thx. I found solution.


Post Reply