Can the grid shows the sort popup in PC ?

[lorryl]

Hi,

Because the sorting function of the grid displayed on the computer, iPad and iPhone is different, 

I want to use the touch screen device mode in a unified way for multi sorting. 

This is the result of my test:

For IOS 13, Safari,

For iPhone and ipad Mini devices, the "request desktop website" function is turned off by default, and UA is "iPhone" or "iPad" to access mobile websites;

For iPad devices, the "request desktop website" function is turned on by default, and the UA is "Mac" to access the PC website.

Can I use the sorting function on the PC using the following sort popup way ?

[Shalini Maragathavel]

Hi Lorryl, 

Thanks for contacting Syncfusion support.

By default in EJ2 Grid we can perform multiSorting in the touchscreen devices by tapping the popup icon. To sort multiple columns in PC, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header.  

So, please share us the following details to validate further on this, 

• Do you wish to perform Multisorting in PC using popup icon?
• Elaborate your requirement in detail.

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[lorryl]

Yes, I wish to perform Multisorting in PC using popup icon. 

Because the sorting function of the grid displayed on the computer, iPad and iPhone is different, especially the sorting styles of iPad and iPhone are different.

I don't want to let my clients set the  the "request desktop website" setting for support the touchscreen devices sorting style in ipad.

Is there a simple solution to achieve this? If not, I will consider other ways. For example, I will make a sort setting window for users to set instead .

[Praveenkumar Gajendiran]

Hi Lorryl,

Thanks for your update.

Based on your request, we have prepared a Grid sample. In the below sample, we have used internal showPopUp method of gridObject.sortModule and load event to achieve your requirement. 

Please refer the below code example, sample and documentation for more information.

Code Example:
[app.component.ts] 

 

load(args) { 

    var instance = this.grid; // gridObject 

    instance.element.addEventListener("mousedown", function(e) { 

      let target: HTMLElement = closest( e.target as Element, ".e-headercell" ) as HTMLElement; 

      if (target) { 

        (instance.sortModule as any).showPopUp(e); 

      } 

    }); 

  } 

[app.component.html] 

 

<ejs-grid #grid class="sortingenabled" [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowMultiSorting]='true' [pageSettings]='pageSettings' (load)="load($event)"> 

        <e-columns> 

            ………… 

        </e-columns> 

    </ejs-grid> 

Sample: https://stackblitz.com/edit/angular-z15c3e?file=app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/sorting/

Please get back to us if you need further assistance.

Regards,
Praveenkumar G