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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Client Sorting - Get Sorted Columns

Thread ID:

Created:

Updated:

Platform:

Replies:

140590 Oct 26,2018 02:21 PM UTC Oct 31,2018 10:28 AM UTC Vue 3
loading
Tags: Data Grid
Stas Volyansky
Asked On October 26, 2018 02:21 PM UTC

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 [Syncfusion]
Replied On October 30, 2018 12:04 PM UTC

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] 
        } 
 
    }); 



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

Please let me know if you have any concern. 

Regards, 
Madhu Sudhanan P 


Stas Volyansky
Replied On October 30, 2018 05:46 PM UTC

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 [Syncfusion]
Replied On October 31, 2018 10:28 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;