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. Image for the cookie policy date

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 08:09 AM

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



  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.


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

Live Chat Icon For mobile
Up arrow icon