add button next to the header with on click custom function without affectinadg the sort method

I want to add a button next to some header in the grid, the problem is when I add the button ,using headerTemplate, and click on it, it sorts the column, I want the column to be sortable but when I click on the button I want to do something else other than sorting. here in the image attached, the button is the info icon, currently, when I click on it, it sorts the column, I don't want that behavior, I want the column to be sortable only when I click on hello text, not on the icon. please provide a functional component example not a class component

Screen Shot 2022-10-20 at 2.03.38 PM.png


1 Reply

RS Rajapandiyan Settu Syncfusion Team October 21, 2022 01:09 PM UTC

Hi Mahmoud,


Thanks for contacting Syncfusion support.


By using the following code in the actionBegin event, you can prevent the sorting action if the target element is a custom icon. Find the below code example and sample for your reference.


actionBegin: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin

 

[index.js]

  function actionBegin(args) {

    if (args.requestType == 'sorting') {

      if ( args.columnName == 'CustomerName' && args.target.classList.contains('customerInfo')) {

        args.cancel = true; // prevent the action

      }

    }

  }

 


Sample: https://stackblitz.com/edit/react-bnjt5e?file=index.js


Please get back to us if you need further assistance.


Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Loader.
Up arrow icon