1. Home
  2. Forum
  3. Vue
  4. Call rowSelected programmatically

Call rowSelected programmatically

Current when an end user selects a row the row argument are passed to the function.  How can I call the rowSelected method via a function. If a row is selected I need to pass the arguments to another function. If no row is selected it needs to terminate. 

5 Replies
PS Pavithra Subramaniyam Syncfusion Team June 18, 2019 06:56 AM UTC

Hi William, 

Thanks for contacting Syncfusion support. 

First of all, we would like to inform that we could not understood your query properly. But we suspect that you want to pass the selected row details to your own function. So, we suggest to use Grid getSelectedRows (to get the selected row elements), getSelectedRecords (to get the selected records detail), getSelectedRowIndexes (to get the selected rows index details) and getSelectedRowCellIndexes (to get the selected cell index details) to collect the required details and then you can pass the collected details to your own function. 

Documentation Links for above mentioned Grid methods, 







If we misunderstood your query, please share more details about your requirement with the Grid code snippet. This will help us to provide the better solution for your requirement as early as possible. 
 
Regards, 
Pavithra S. 


WM William Morgenweck June 18, 2019 01:46 PM UTC

sorry about that.

the grid has:
                 <ejs-grid
                  id="memberGrid"
                  ref="grid"
                  :dataSource="topGridContent"
                  :rowSelected="memberRowSelected"
                  :allowSorting="true"
                  :recordDoubleClick="membersDoubleClick"
                  :selectionSettings="selectOptions"
                >

and when the memberRowSelected function is called it is passed arguments.  so

 memberRowSelected: function(args) {
      let record = args.data;
     this.displayName =
      " for " +
        record["First_Name"] +
        " " +
        record["Middle_Initial"].substring(0, 1) +
        " " +
        record["Last_Name"];

//calls an external function and passes all of the args
}

I want to have a button than when clicked will call memberRowSelected and pass the same args as the grid does when a row is selected. It needs to be formatted as the args not a group of different elements so that the function on;y needs to be written one way.



PS Pavithra Subramaniyam Syncfusion Team June 19, 2019 12:11 PM UTC

Hi William, 

Thanks for the update. 

The Grid rowSelected event only invoke when we select the row in Grid and we have formed this rowSelected event arguments in our source level. So, we cannot form this argument in client side while we programmatically call this rowSelected event. So, we suggest to store this event arguments in one global variable at initial triggering and then you can pass this stored arguments while calling this rowSelected event programmatically. Please refer the following code snippet, 

<script> 
import Vue from "vue"; 
import { 
  GridPlugin, 
  Page 
} from "@syncfusion/ej2-vue-grids"; 
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 
import { data } from "./datasource"; 
 
Vue.use(GridPlugin); 
Vue.use(ButtonPlugin); 
 
var argsValue; // Global variable 
 
export default { 
  data() { 
    return { 
      data: data 
    }; 
  }, 
  provide: { 
    grid: [Page] 
  }, 
  methods: { 
    memberRowSelected: function(args) { // RowSelected event 
      argsValue = args; // Stored the rowSelected event aruguments in global variable  
    }, 
    btnClick: function(e){ 
        this.memberRowSelected(argsValue); // Passed the global variable value to rowSelected (i.e memberRowSelected) method 
    } 
  } 
}; 
</script> 

 
Regards, 
Pavithra S. 


WM William Morgenweck June 19, 2019 03:07 PM UTC

That will work-- thanks

PS Pavithra Subramaniyam Syncfusion Team June 20, 2019 05:16 AM UTC

Hi William,  

Thanks for your update. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


Loader.
Up arrow icon