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

[mahmoud khedr]

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

[Rajapandiyan Settu]

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.