Problems encountered when using pivot tables

hi All    

I encountered the following problems while using pivot tables and couldn't find a solution. I hope to receive your help.

 1、I have a column of data, which is ordinary string data and does not require grouping and summarizing, but it needs to be displayed. Now I see that this effect does not exist.

 2、The setting module on the right side. After the setting is completed, it needs to be able to be hidden, but the kind that I don't need to pop up will be displayed on one page.


Image_9476_1724724229297


thank you

   


1 Reply

SK Sridhar Karunakaran Syncfusion Team August 27, 2024 04:07 PM UTC

Hi Renard,

Thank you for contacting us. Please find the response below.

Query

Comments

I have a column of data, which is ordinary string data and does not require grouping and summarizing, but it needs to be displayed. Now I see that this effect does not exist.

We would like to inform you that our Pivot Table component displays summarized and grouped values by default. This is the standard behavior of a pivot table. If this behavior is not desired, we recommend using the Syncfusion Data Grid component, which displays the flat data based on your requirement. For more information about the Data Grid component, please refer to the following user guide documentation and demos.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started

Demos: https://ej2.syncfusion.com/angular/demos/#/fluent2/grid/over-view

The setting module on the right side. After the setting is completed, it needs to be able to be hidden, but the kind that I don't need to pop up will be displayed on one page.

We understand that you need to dynamically open or close(hide) the pivot fixed field list. In that case, you can render the pivot field list within the Syncfusion Side Bar component and manage its visibility according to your requirement. Please refer to the code example below.

Code example:
[app.component.html]

    <div id="wrapper" class="control-section">

        <!--main content declaration -->

        <div>

          <div id="listToolbar"></div>

        </div>

        <div class="maincontent">

            <ejs-pivotview #pivotview id='PivotViewFieldList' width='99%' height='600'

                (enginePopulated)='afterEnginePopulate($event)' [gridSettings]='gridSettings'>

            </ejs-pivotview>

        </div>

        <!--end of main content declaration -->

      </div>

      <!-- sidebar element declaration -->

      <aside id="listSidebar" class="sidebar-list">

        <!--TreeView control declaration-->

        <ejs-pivotfieldlist #pivotfieldlist id='PivotFieldList' [dataSourceSettings]=dataSourceSettings renderMode="Fixed"

            (enginePopulated)='afterPopulate($event)' allowCalculatedField='true' enableFieldSearching='true' (load)='onLoad()'

            (dataBound)='ondataBound()'>

        </ejs-pivotfieldlist>

      </aside>

 

[app.component.ts]

     //Toolbar component template element specification

    public folderEle = '<div class= "e-folder"><div class= "e-folder-name">Language</div></div>';

     public fieldlistObj: PivotFieldListComponent;
     public toolbarObj: Toolbar;

    
      
toolbarCliked = (args) => {

        if(args.item.tooltipText == "Menu") {

           // dynamically open or close the pivot field list using side bar

            this.sideObj.toggle();

        }

    }

 

    ngOnInit(): void {

         //Toolbar component rendering code blocks

        this.toolbarObj = new Toolbar({

            clicked: this.toolbarCliked,

            items: [

                { prefixIcon: "e-tbar-menu-icon tb-icons", tooltipText: "Menu" },

                { template: this.folderEle }

            ]

        });

        this.toolbarObj.appendTo('#listToolbar');
       // Render side-bar component here.

        this.sideObj = new Sidebar({

            width: "400px",

            target: ".maincontent",

            type: "Auto",

            created: (args) => {

                this.sideObj.hide();

            },

            change: function(args){

                this.pivotObj.layoutRefresh();

            }

        });

        this.sideObj.appendTo("#listSidebar");

 

    }

 

 

Output GIF Image:


Meanwhile, we have prepared a sample for your reference. You can find the sample at the following link.
Sample: 
https://stackblitz.com/edit/angular-vrcxwl-aacasr?file=src%2Fapp.component.html,src%2Fapp.component.ts


Please let us know if you have any concerns.


Regards,
Sridhar Karunakaran



Loader.
Up arrow icon