We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to enable/disable the Grid toolbar and contextMenu items based on the Grid row selection in Vue Grid

I have custom buttons in the datagrid toolbar and in the conext menu.

How can I disable them if no entry in the grid is selected? Normally i would do sth like: :disabled="_.isEmpty(this.selectedRows)", but since they are generated automatically I don't know how to do that.

gridContextMenuItems: [
{
text: 'Copy Url',
target: '.e-content',
id: 'copyurl'
}],

toolbarOptions: [
{
text: 'Copy url',
id: 'copyurl'
}]

1 Reply

PS Pavithra Subramaniyam Syncfusion Team May 8, 2019 05:59 AM

 
Thanks for contacting Syncfusion support. 
 
From your query we found that you want to enable and disable the Grid toolbar and contextMenu items based on the Grid row selection. So we suggest to use the Grid rowSelected and rowDeselected event to achieve this requirement. Please refer the following code snippet, 
 
rowSelected: function(args) { 
        if (this.$refs.grid.getSelectedRecords().length) { 
            this.$refs.grid.ej2Instances.toolbarModule.enableItems(["copyurl"], true);           this.$refs.grid.ej2Instances.contextMenuModule.contextMenu.enableItems(['Copy Url'], true); 
        } 
    }, 
rowDeselected: function(args) { 
        if (!this.$refs.grid.getSelectedRecords().length) { 
            this.$refs.grid.ej2Instances.toolbarModule.enableItems(["copyurl"], false); 
            this.$refs.grid.ej2Instances.contextMenuModule.contextMenu.enableItems(['Copy Url'], false); 
        } 
    } 
 
In the above code, we have used enableItems method of the contextMenu and Toolbar controls to achieve this requirement. We have prepared the sample for your reference and you can find that sample from the below link, 
 
 
                              https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdeselected 
                              https://ej2.syncfusion.com/vue/documentation/api/toolbar#enableitems 
                              https://ej2.syncfusion.com/vue/documentation/api/context-menu#enableitems 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon