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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143107 Mar 5,2019 10:20 AM UTC Sep 2,2019 07:42 AM UTC Vue 3
loading
Tags: Data Grid
Jzy
Asked On March 5, 2019 10:20 AM UTC

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 [Syncfusion]
Replied On March 5, 2019 11:25 AM UTC

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] 
  } 
}); 
 
                              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
Replied On August 31, 2019 08:28 PM UTC

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

Dhivya Rajendran [Syncfusion]
Replied On September 2, 2019 07:42 AM UTC

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. 


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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;