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

Switching the column sort order between ascending and descending order only in React data Grid

Hi, the default sorting behavior in EJ2 Grid is ascending -> descending -> none so there are three clicks on the column, I want to make it only two, ascending, and descending. so that the third click would be ascending again, not a none click, I see the question has been asked before in Vue here https://www.syncfusion.com/forums/162157/switching-the-column-sort-order-between-ascending-and-descending-order-in-vue-grid , I want the same behavior but for React and please provide a functional component example, not a class component,

thanks.


3 Replies

RR Rajapandi Ravi Syncfusion Team October 19, 2022 07:52 AM

Hi Mahmoud,


Greetings from Syncfusion support


As per your requirement, we have prepared a sample solution in React function component. Please refer the below code example and sample for more information.


 

function Home() {

    const actionComplete = (args) => { //actionComplete event of Grid

      if (args.requestType === "sorting" && !args.direction) {

        var grid = document.getElementById('Grid').ej2_instances[0]; //Grid instances

        var index = args.target.closest("th").cellIndex;

        var column = grid.getColumnByIndex(index).field;

// here we sort the same column with Ascending direction by using sortColumn method when a repetitive third click on the same column

        grid.sortColumn(column, "Ascending", true);  

      }

    }

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <GridComponent id="Grid"

                    dataSource={data}

                    allowSorting={true}

                    actionComplete={actionComplete}

                >

                    <ColumnsDirective>

                        <ColumnDirective field="OrderID" isPrimaryKey={true} headerText="Order ID" textAlign="Left" />

                        <ColumnDirective field="CustomerID" headerText="Customer ID" textAlign="Center" />

                        <ColumnDirective field="ShipCity" headerText="Ship City" textAlign="Center" />

                        <ColumnDirective field="ShipCountry" headerText="Ship Country" textAlign="Center" />

                    </ColumnsDirective>

                    <Inject services={[ Page, Search, Filter, Sort ]} />

                </GridComponent>

    </div>

  );

}

 


Sample: https://stackblitz.com/edit/react-t64b7e-tz3k8x?file=index.js,package.json


API: https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete


Regards,

Rajapandi R



MK mahmoud khedr October 19, 2022 05:30 PM

does this example work with version 20.2.44 ? 



RR Rajapandi Ravi Syncfusion Team October 20, 2022 09:35 AM

Hi Mahmoud,


Thanks for your update


As per your requirement, we have prepared a sample with the Syncfusion package version of 20.2.44 . Please refer the sample for more information.


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


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon