Cancel rowselected when clicking on a custom button

Question

I have a grid with a command column

I also have

:commandClick="commandClick"

:rowSelected="rowSelectedGrant"

:recordDoubleClick="recordDoubleClick"

It seems that the rowSelected is fired before the commandClick is fired. I've noticed that when I click on the commandClick button the rowSelected is fired with information to the target button. Is there a way that I can read the innerHTML or text and cancel the commandClick event. In both events I need to call an web api and I don't want to call it twice.

or when the rowSelected if fired if it is the column with the command button cancel the commandClick?

Maybe there is a better way?

Thanks

Rajapandi Ravi · Accepted Answer

Hi William, 

Thanks for the update 

Based on your query we could see that you like to call the API in rowSelected and commandClick event. To achieve your requirement, we suggest you remove the commandClick event and place the commandClick code in rowSelected event based on some condition. You can get the difference between the click by using recordClick event. Please refer the below code example and sample for more information. 





 
methods: { 
    rowSelected: function (args) { 
      if (window.flag) { //when you click the button the flag is true and here you can write the code for button click 
        window.flag = false; 
      } else { 
       //here you can write the code for rowselected actions 
        console.log("rowselected event triggers"); 
      } 
    }, 
    recordClick: function (args) { 
      if (args.column.headerText === "Commands") { 
        window.flag = true; //based on the click of target we able to get the column headerText 
      } 
    }, 
  } 
 

Sample: https://codesandbox.io/s/vue-template-forked-11fnz?file=/src/App.vue 
Regards,Rajapandi R

Rajapandi Ravi · Answer

Hi William, 

Greetings from syncfusion support 

By default, when you click the command click button the row will get selected and it will trigger the rowSelected event. It was the default behavior.  

Before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)     Please share the details about what are the custom command buttons you are using in your application and share how those buttons are performed. 

2)     In your query you have mentioned that you are calling API in both events. So please share the details about what actions you are performing in the rowSelected and commandClick event. 

3)     Please share your exact requirement scenario with detailed description and share your complete Grid rendering code example. 

Regards, Rajapandi R

William Morgenweck · Answer

Fantastic- I welcome your input.

First I populate a grid with data that has been read from the first API-- in it it has a Grant ID value. When I click on a row or the button I need to call a second API using the Grant ID CA055536

http://xxxxxxxxx.org/api/NIH_Reporter/CA055536

This will return a JSON object that I need to read and populate an area with some of the data.

One of the items is appl_id 9546225

If the row was selected everything is fine but if the button was selected then I need open another browser page using the appl_id.

https://reporter.nih.gov/project-details/9546225

The problem is that at times the http://xxxxxxx.org/api/NIH_Reporter/CA055536 api can be slow and if I call the new browser it could be reading the last rows values.

And in Vue it tough to use awaits and timeouts

I've placed xxxxxxx.org instead of my internal web url but I've attached the data that it returns

Attachment: sync_a14acaeb.zip

William Morgenweck · Answer

Is there something special that I need to do to get the :recordClick="recordClick" event to fire?

Do I have something that cancels that?

:dataSource="GrantList"

id="grantGrid"

ref="grantGrid"

:allowTextWrap="true"

:editSettings="editSettings"

:rowSelected="rowSelectedGrant"

:disableHtmlEncode="false"

:created="created"

:toolbar="toolbarOptions"

:allowExcelExport="true"

:toolbarClick="toolbarClick"

:allowSelection='true'

:selectionSettings='selectOptions'

:recordClick="recordClick"

Thanks

Rajapandi Ravi · Answer

Hi William, 

Thanks for the update 

Based on your query we could see that don’t you like to involve any other events for cancel .We suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
methods: { 
    rowSelected: function (args) { 
      if (!args.target.closest("td").classList.contains("e-unboundcell")) { //prevent the command button click 
       //here you can write the code for rowselected actions 
        console.log("rowSelected event triggers"); 
      } 
    }, 
    commandClick: function (args)  
//here you can write the code for command button actions 
      console.log("Command click event triggers"); 
    }, 
  }, 

Sample: https://codesandbox.io/s/vue-template-forked-ud4y2?file=/src/App.vue 
Regards,Rajapandi R

William Morgenweck · Answer

This works and Thank you.I do have a question you stated "Based on your query we could see that don’t you like to involve any other events for cancel ."  I'm not sure I did that on purpose.  I normally take some samples and just add to them.  If there is a better way in your mind to do what I'm trying to do I am more that open to look at a different solution.Thanks again

Rajapandi Ravi · Answer

Hi William, 

We are happy to hear that the provided solution works fine at your end. 

The above solution is a better way to differentiate the click of row selection and command button. So, we suggest you use the above solution to achieve your requirement. 

Regards, 
Rajapandi R

William Morgenweck · Answer

Thanks for you help

Rajapandi Ravi · Answer

Hi William, 

You are welcome and please get back to us if you need any other assistance. 

Regards,Rajapandi R