Custom Sort order for Pivot Table columns

[Yoshiro]

Hello,

My pivot table is displaying data from the database. However, the columns are sorted in alphabetical order. I would like to show the columns in a custom sort order. Pleas see the attached zip. The columns are sorted as 

"AB,Bloomberg,ICE,Markit,NAV,PC-Bond,PricingDirect,Reuters" which is alphabetical.

I would like them to be custom sorted as 

"ICE, Bloomberg, PricingDirect, Reuters, Markit, NAV,PC-Bond, AB"

I am setting up my Pivot Table as follows.

<SfPivotView TValue="SecurityPriceModel" Height="650" ShowToolbar=true Toolbar="@PivotToolbar" AllowPdfExport="true" ShowGroupingBar="true" ShowFieldList="true" >

            <PivotViewDataSourceSettings DataSource="@prices" ExpandAll=false EnableSorting="true">

                <PivotViewColumns>

                    <PivotViewColumn Name="Source"></PivotViewColumn>

                </PivotViewColumns>

                <PivotViewRows>

                    <PivotViewRow Name="InstrumentClassCode"></PivotViewRow>

                    <PivotViewRow Name="CoreDisplaySectorName"></PivotViewRow>

                </PivotViewRows>

                <PivotViewValues>

                    <PivotViewValue Name="PrimaryAssetID" Type="@PAIAggregateType"></PivotViewValue>

                </PivotViewValues>

                <!--<PivotViewSortSettings>

                    <PivotViewSortSetting Name="Source" Order=How_to_set_custom_order></PivotViewSortSetting>

                </PivotViewSortSettings>-->

            </PivotViewDataSourceSettings>

           <PivotViewGridSettings AutoFit="true">

           </PivotViewGridSettings>

           <PivotViewEvents TValue="SecurityPriceModel" OnLoad="load"></PivotViewEvents>

Any help is much appreciated.

Thank you.

           <!--<PivotViewEvents TValue="SecurityPriceModel" BeforeColumnsRender="ColumnRender"></PivotViewEvents>-->

        </SfPivotView>



Attachment: PricingWebUI_fe2f403f.zip

[Yoshiro]

I forgot to add that I can modify my database query so that the column headings are named 

" 1ICE, 2Bloomberg, 3PricingDirect, 4Reuters, 5Markit, 6NAV, 7PC-Bond, 8AB"

and this will sort the columns as I need. However, I do not know how to replace the column headers with the correct values - without the prefix number when shown on the grid.

Thank you,

Yoshi

[Rajeshkannah G]

Hi Yoshi,

Using the cell template option, you can display the column headers by removing the prefix numbers in the pivot table. Please refer the below code example.

Code example:

<SfPivotView>

<PivotViewTemplates>

        <CellTemplate>

           @{

               var data = (context as AxisSet);

               if (data != null)

              {

                if (data.Axis == "column" )

                {

                 //To find the length of numbers that are present at starting                      index of the column header.

                  int length = regex.Match(data.FormattedText).Length;

                  @data.FormattedText.Remove(0,length)                            

                 }

                 else

                 {

                     @data.FormattedText

                 }

                }

              }

        </CellTemplate>

</PivotViewTemplates>

</SfPivotView>

   

 

@code {

  

    //Regex pattern to identify numbers at the start (from 0 upto 9999)

    public Regex regex = new Regex(@"^[0-9]{1,4}");

}

 

Output screenshot:

Meanwhile we have prepared a sample for your reference

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable1581660456

Please refer our documentation for more information about cell template option

https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#cell-template

Please let us know if you have any concerns occur.

Regards,

Rajeshkannah G.

[Yoshiro]

Thank you. I will try your suggestion shortly.

Is there any way to center the header text in the cell ? Its currently left aligned as you can see in the screenshot.

I tried to set the Style of he pivot table as

.e-pivotview .e-headercell {

        background-color: thistle !important;

        text-align: center !important;

    }

but it did not work.

Thank you again.

[Rajeshkannah G]

Hi Yoshiro,

You can display the pivot table's column header text at center by using the CSS styles listed below. Please refer to the following code example.

Code example:

<style>

    .e-pivotview .e-columnsheader

    {

       background-color : thistle !important;

    }

    .e-headertext

    {

      text-align: center !important;

    }

</style>

Output screenshot:

Meanwhile we have prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable-1388745581

Please let us know if you have any concerns occur.

Regards,

Rajeshkannah G

[Yoshiro]

This worked perfectly! 

Thank you Rajeshkannah G

[Rajeshkannah G]

Hi Yoshiro,

Please let us know if you have any other queries. We are always happy to assist you.

Regards,

Rajeshkannah G