Sorting on pivot view using value attribute

[Samir Modi]

Hi Team,

I am using below sample data for displaying pivot table. Now I need to display this grid based on distance value ascending left to right row wise. For example 100 should be the first cell with Mumbai and Bangalore as the intersection, then 200 and so on. Currently, it displays pivot using alphabetical sorting for both columns and rows.

var distanceBetweenCities = [

    { distance: 400, srcCity: "Indore", destCity: "Chennai" },

    { distance: 200, srcCity: "Delhi", destCity: "Pune" },

    { distance: 700, srcCity: "Pune", destCity: "Hyderabad" },

    { distance: 420, srcCity: "Gujarat", destCity: "Dehradun" },

    { distance: 100, srcCity: "Mumbai", destCity: "Bangalore" },

    { distance: 150, srcCity: "Indore", destCity: "Bangalore" },

    { distance: 350, srcCity: "Indore", destCity: "Delhi" },

    { distance: 450, srcCity: "Indore", destCity: "Pune" },

   { distance: 650, srcCity: "Indore", destCity: "Hyderabad" },

    { distance: 300, srcCity: "Indore", destCity: "Dehradun" },

 { distance: 150, srcCity: "Mumbai", destCity: "Indore" },

    { distance: 350, srcCity: "Mumbai", destCity: "Delhi" },

    { distance: 450, srcCity: "Mumbai", destCity: "Pune" },

   { distance: 650, srcCity: "Mumbai", destCity: "Hyderabad" },

    { distance: 300, srcCity: "Mumbai", destCity: "Dehradun" },

.......

......

];

Here rows are srcCity, columns are destCity and value as distance.

I tried the value sorting and member sorting configs as well as mentioned in documentation but its not working. Can you provide a sample with the ask?

2) This data is huge. I have specified width as 100% but some columns are not visible even with horizontal scroll bar.If i zoom out the viewport using Cntrl + - key, i see the additional columns. How to ensure scroll bar shows all columns.

3) Can height be specified as auto? (dynamic based on data). The documentation is using a numeric value in the template( like 700). In my case i don't know how many rows would be coming in.

[Sivamathi Natarajan]

Hi Samir Modi, 

  

Thanks for contacting Syncfusion support. 

  

Please find the response below, 

-------- 

Query	Response
I tried the value sorting and member sorting configs as well as mentioned in documentation but its not working. Can you provide a sample with the ask?	We would like to inform that the requirement can be achieved through the value sorting feature. By default, value sorting will be applied in column axis. But your requirement is to apply value sorting in rows axis. It can achieved by setting valueAxis property as row. Meanwhile, we have prepared a sample for your reference. Please check the below sample link.     Sample: https://stackblitz.com/edit/angular-7xptc1-sasulh?file=app.component.ts
This data is huge. I have specified width as 100% but some columns are not visible even with horizontal scroll bar.If i zoom out the viewport using Cntrl + - key, i see the additional columns. How to ensure scroll bar shows all columns.	Please share the below details.     Could you please inspect the pivot table UI and share width. Because it will be varied based on system resolution.         Shared us your used json data(raw data). Are you using virtualization feature? Please check the below documentation for reference. https://ej2.syncfusion.com/angular/documentation/pivotview/virtual-scrolling/#virtual-scrolling
Can height be specified as auto? (dynamic based on data). The documentation is using a numeric value in the template( like 700). In my case i don't know how many rows would be coming in.	We are validating your requirement – “To set auto for height property”. We will update the further details within two business days (6/26/2020).

  

Please let us know if you have concern. 

  

Regards, 

Sivamathi. 

[Sivamathi Natarajan]

Hi Samir Modi. 

 

Please find our response. 

 

Query	Response
Can height be specified as auto? (dynamic based on data). The documentation is using a numeric value in the template( like 700). In my case i don't know how many rows would be coming in.	Currently we don’t have such option which you have mentioned. But we suggest you to set the height value as percentage. So the component will be placed inside its parent container without any overflows.

 

Regards, 

Sivamathi. 

[Samir Modi]

Thansk Sivamati for the response. Was able to achieve what I needed. Cheers

[Sivamathi Natarajan]

Hi Samir Modi, 

 

Thanks for the reply. 

 

Regards, 

Sivamathi.