Rendered in widget

[prashantgoel]

We have a ellipsis menu at the end of each row and we are using widgets. Is it possible to have a rendered within widgets? When we tried it, the text does not display. Ultimate, we need to enable/disable menu items based on a condition so we need to read the row data in the rendered. Here is an example:

            widgets: [{
                type: 'button',
                icon: 'b-fa b-fa-fw b-fa-ellipsis-v',
                menu: {
                    type: 'menu',
                    anchor: true,
                    autoShow: false,
                    items: [
                        {
                            icon: 'fa fa-fw fa-file-signature',
                           // text: 'View Responses',

                       // IS THIS POSSIBLE?
                            renderer: ({ record, widgets}) => {
                                return 'View Responses';
                            }                             
                        },
                        {
                            icon: 'fa fa-fw fa-times-circle',
                            text: 'Clear Consent'    
                        },

[Animal]

So that's a MenuItem. As you already know they have a text property. What do you want that particular menuItem to look like?

[prashantgoel]

We need to disable the menu item on a certain condition based on the data in the row and in some cases show different text in the menu item.

Also, can I add an "onClick" on the menu item to call a javascript function?

Something like:

                        items: [
                            {
                                icon: 'fa fa-fw fa-file-signature',
                                text: 'View Responses',
                               onClick: 'clickWala',
                               

[Animal]

You can listen for beforeShow on the Menu to enable and disable menuitems.

And here is what you can do with MenuItems: https://bryntum.com/products/grid/docs/api/Core/widget/MenuItem

[Animal]

Did you not follow the link to the codepen which contains a lot of help? https://codepen.io/Animal-Nige/pen/KKEQxGa

[prashantgoel]

Some thing like this? In this example, we only want to disable the first menu item if the last name on the record is "Anong".

                       

                       onBeforeShow({ source: Widget }) {
                            var gridObj = Widget.up('grid');
                            const element = Widget.owner.element.closest('.b-grid-row');
                            const rec = gridObj.getRecordFromElement(element);
                            if (rec.LastName = 'Anong') {
                                console.log('im here!', Widget, rec.lastName);
                                Widget.items[0].disabled = true;
                            }
                        },
                        

[Animal]

Bad usage of capital letters there. Widget is a class name. That's a well established convention.

Also, see how the codepen uses this property to know the context of the widget: https://bryntum.com/products/grid/docs/api/Core/widget/Widget#property-cellInfo

[prashantgoel]

I am still not able to make this work. I am trying to disable one of the menu items in the widget menu dropdown if the record it's on has a certain value in one of the fields. That's all my requirement it. Seems like a very straightforward need. If you can provide an sample snippet of code, that will be helpful and will save everyone time.

[Animal]

It would only help one time.

You are nearly there. Use a beforeShow listener. Access the cellInfo, check the record, disable the child item depending on your condition.

[prashantgoel]

cellInfo returns unidentified in onBeforeShow:

                        onBeforeShow({ source }) {
                            console.log('fired!', source, source.cellInfo);