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

[mahmoud khedr]

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.

[Rajapandi Ravi]

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

[mahmoud khedr]

does this example work with version 20.2.44 ? 

[Rajapandi Ravi]

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