show selected menu item text in menu caption

[laalu]

have a menu caption "selectMenu" and contains subitems(item1,item2,item3) if i click on any item then menu caption should be changed to selected item text how can i do this ,please give me solution of this

$('#grid').w2grid({ 
        name: 'TestGrid',
                header: 'Test',
                multiSelect: true,
                show: {
                    toolbar: true,
                    header: true,
                    footer: true,
                    lineNumbers: false,
                    selectColumn: false,
                    toolbarDelete: false,
                    toolbarReload: false,
                    toolbarSearch: false,
                    toolbarColumns: false
                },
                toolbar: {
                    items: [

                        { type: 'menu',   id: 'selectMenu', caption: 'selectMenu',items: [{ text: 'Item 1'},{ text: 'Item 2'},{ text: 'Item 3' }]}
                    ],
                    onClick: function (target, eventData) {
                        if (eventData.subItem) {
                            if (eventData.target.substr(0, eventData.target.indexOf(":")) == 'selectMenu') {

                                alert('selectMenu' + ' ' + eventData.subItem.id + ' ' + eventData.subItem.text + ' ' + eventData.target.substr(0, eventData.target.indexOf(":")));                          
                            }
                            else if (eventData.target.substr(0, eventData.target.indexOf(":")) == 'allNetworks') {
                                alert('hi' + ' ' + eventData.subItem.id + ' ' + eventData.subItem.text + ' ' + eventData.target.substr(0, eventData.target.indexOf(":")));
                            }
                        }
                    }
                }

    });

thank you

[bwl21]

in toolbar.onClick

      onClick: function (event) {
        if (perspectives[event.target]) {
          perspectives[event.target]();
          if (event.subItem) {
            event.item.text = event.subItem.text
          }
        }

see here (link may not be stable :-) https://github.com/bwl21/zupfnoter/blob/master/30_sources/SRC_Zupfnoter/index_opal.html.erb#L321

you can see it in action in https://zupfnoter.weichel21.de

[mrg2001]

@bwl21 solution works. Also, as of 1.5, most of the caption, tooltips, etc properties can also be functions, then, you can define your menu button in the following way

{ type: 'menu-radio', id: 'menu.radio',
    caption: function (item) {
        var it = this.get('menu.radio:' + item.selected); // get subitem that is selected
        return 'Menu: ' + it.text;
    },
     items: [
        { id: 'item1', text: 'First Item', count: 3, icon: 'fa-heart' },
        { text: '--' },
        { id: 'item2', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
        { id: 'item3', text: 'Item 3', icon: 'fa-star-empty', checked: true },
        { text: '--' },
        { id: 'item4', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' },
        { id: 'item1a', text: 'First Item', count: 3, icon: 'fa-heart' },
        { text: '--' },
        { id: 'item2a', text: 'Item 2', icon: 'fa-user', count: 12, checked: true },
        { id: 'item3a', text: 'Item 3', icon: 'fa-star-empty', checked: true },
        { text: '--' },
        { id: 'item4a', text: 'Item 4', icon: 'fa-link', hotkey: '⌘L' }
    ],
}