Client Sorting - Get Sorted Columns

[Stas Volyansky]

Using the grid with custom datasource (array of objects) leads to the client side pagination and sorting. But in this case dataStateChange event is not raised in which args it is possible to see all the sorted columns.
In actionBegin and actionComplete there is only last sorted column and nothing if the column was unsorted.
Also here in docs I see that the user can get current sorted columns from sortSettings. But this prop does not work with two-way binding (.sync) and is used only for initial sorting.
So what is the way to get the sorted columns with client-side sorting?
Thanks for help.

[Madhu Sudhanan P]

Hi Stas, 

You can get the sorted columns by using the gridInstance.sortSettings.columns property in the actionComplete event. Please refer to the below code example, Documentation link and sample link. 

[index.js] 

new Vue({ 

        el: '#app', 

        template: ` 

    <div id="app"> 

       <ejs-grid :dataSource="data" ref='grid' :actionComplete='Complete' class="sortingenabled" :allowPaging='true' :allowSorting='true' :sortSettings='initialSort' :pageSettings='pageSettings'> 

            <e-columns> 

             .  .  . 

            </e-columns> 

        </ejs-grid> 

    </div> 

`, 

 

data() { 

     return { 

          data: data, 

          initialSort: { 

                    columns: [{ field: 'Freight', direction: 'Ascending' }, 

                    { field: 'CustomerID', direction: 'Descending' }] 

                }, 

          pageSettings: { pageCount: 5 } 

            }; 

        }, 

        methods: { 

            Complete: function (args) { 

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

                    // here “this.$refs.grid.ej2Instances” is Grid instance 

                console.log(this.$refs.grid.ej2Instances.sortSettings.columns); 

                } 

            } 

        }, 

        provide: { 

            grid: [Page, Sort] 

        } 

 

    }); 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#actioncomplete  

Sample               : https://plnkr.co/edit/aQpxxaFOVOiPClpxItiI?preview&p=preview  

Please let me know if you have any concern. 

Regards, 

Madhu Sudhanan P 

[Stas Volyansky]

Yes. This is exactly what I need. Thank you for help!
By the way, are there any plans to enable prop.sync for the settings props in Data Grid future updates?

[Madhu Sudhanan P]

Hi Stas, 

Thanks for the update. The sync modifier allows two way binding however it allow mutation of parent state from child which causes side effects. And hence please use the previously provided update to get the columns from the sortSettings. 

Regards, 

Madhu Sudhanan P