How to get values of selected grid row if one customized buttons is clicked on toolbar?

[Jzy]

Hi,

I customize one item on toolbar and define toolbarClick (:toolbarClick="toolbarClickHandler"). But I find args (given in toolbarClickHandler: function(args)) don't include those values of selected grid row, how can I get them?

Thanks,

Jzy

[Pavithra Subramaniyam]

Hi Jzy, 

 

Thanks for contacting Syncfusion support. 

 

In Essential JavaScript 2 Grid, ‘toolbarClickEventArgs’ will contains only the default arguments from the source. We suspect that you want to get the selected row information inside the toolbarClick event of Grid. If yes you can achieve your requirement by using the ‘getSelectedRows()’ and ‘getSelectedRecords()’ methods of Grid component. Please refer to the below code example, documentation link and sample link for more information. 

 

[vue] 

 new Vue({   

              el: '#app', 

              template: ` 

    <div id="app"> 

        <ejs-grid id="Grid" ref="grid" :dataSource="data" :selectionSettings="selection" :toolbar='toolbar' :toolbarClick='clickHandler' height='315px'> 

          <e-columns> 

            <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column> 

            .   .  . 

          </e-columns> 

        </ejs-grid> 

    </div> 

`, 

 

  data() { 

    return { 

      data: data.slice(0,20), 

      selection:{type:'Multiple'}, 

      toolbar: [{ text: 'Row Info', tooltipText: 'Row Info',  id: 'rowinfo' }],        

    }; 

  }, 

   methods: { 

      clickHandler: function(args) { 

        if (args.item.id === 'rowinfo') { 

            console.log(this.$refs.grid.ej2Instances.getSelectedRows()); 

            console.log(this.$refs.grid.ej2Instances.getSelectedRecords()); 

        }         

    }      

   }, 

    provide: { 

    grid: [Toolbar,Page] 

  } 

}); 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclick  

                              https://ej2.syncfusion.com/vue/documentation/api/grid/#getselectedrecords  

                              https://ej2.syncfusion.com/vue/documentation/api/grid/#getselectedrows  

 

Sample               : https://plnkr.co/edit/TN2LoskjgIzMsWVgvxDN?p=preview  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

 

[William Morgenweck]

This documentation really does not say anything.  No understanding of how to use it.  Will this be improved?

[Dhivya Rajendran]

Hi William, 

Thanks for your update. 

We have already documented how to use custom toolbar and toolbar items in Grid. Please refer the below help documentation for more information. 

Help documentation: https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/?no-cache=1#custom-toolbar-items   

As per your suggestion, we will improve our documentation and will add “How to get selected records in custom toolbar click” in toolbar section, which will refresh in any of our upcoming release. 

   

Regards, 

R.Dhivya