Collapse stacked headers / Hide & show grouping bar / Refresh groups after editing row

[Victor Gallego]

Good morning everyone,

I'm evaluationg the angular component library to see if it could be a good fit for us.

So far I found them super interesting and well designed.

I have a couple of questions I couldn't find in the Docs.

Missing functionality:

I would like to have some kind of page size controls for the grid.

Missing functionality:

I would like to collase a group of stacked headers.

I miss this functionality so much, "sum up" the info in the grid in such interesting way.

It's quite usefll for mobile, as you don't have to scroll as much.

It's similar to the Pivot but not exactly the same. Pivot is grouping by a column, this is only a herarccical structure of columns, right?

Here there is an example: https://www.ag-grid.com/javascript-grid-grouping-headers/

Bugs:

SITUATION:

I would like to edit the value of a column that is also a grouping column to change the group it belongs to.

PROBLEM:

If you have a grid brouped by a column, and you keep the grouping column visible, and you change the value of that column for one row it's not refreshing the group it belongs to.

EXPECTED BEHABIOUR:

When I save changes the groups get recalculated becouse I have modified a grouping column.

EXAMPLE CODE: 

https://stackblitz.com/edit/angular-fzcc4w-2n83be

SITUATION:

I would like to show and hide the grouping bar onlu when there is a group.

PROBLEM:

group bar hidden => group bar visible, then size of the grid inncreases and overflows the container. (The page controls are hidden becouse of the new grouping bar)

How to recalculate / resize the grid ?

EXPECTED BEHABIOUR:

I can show and hide the grouping bar and recalcualte the height of the grid so that every control apears in the screen and I don't have to scroll

EXAMPLE CODE: 

https://stackblitz.com/edit/angular-fzcc4w-2n83be

OTHER:

Quite a few of the pages of the documentation are not working.

https://ej2.syncfusion.com/angular/documentation/api/listview/

https://ej2.syncfusion.com/angular/documentation/listview/how-to/listview-with-hyper-link-navigation/

https://ej2.syncfusion.com/angular/documentation/listview/how-to/load-the-spinner-until-list-items-are-loaded/

https://ej2.syncfusion.com/angular/documentation/toast/action_buttons/

And some more...

Thank you for your time :)

Victor

Attachment: syncfusionscreenshots_a2bf474f.rar

[Deepa Loganathan]

Hi Team,  

 

Please find the response from Toast team. 

 

We will fix the reported issue in documentation and as per the release schedule, the changes will be refreshed online in the second week of December.  

 

 

Please let us know if your facing difficulties in using our Toast component.  

 

 

Regards,  

Deepa L. 

[Victor Gallego]

Hello again, thanks for the quick reply. 

Appreciate the effords to improve documentation. 

I've continued to test the library and I found out how to implement two of my questions:

Show the pageSize control for the grid.
Refreshing the grid after editing a grouped row.

So all good here!

Perhaps you could help me with the other bugs I mentioned earlier? Basically I want to show the dropArea for grouping colunmns ONLY when one or more columns are grouped. The problem is that height of the overall grid increases and the page controls are not visible. Here a example: 

https://stackblitz.com/edit/angular-fzcc4w-2n83be

And about collapsing staked headers? 

Here there is an example: https://www.ag-grid.com/javascript-grid-grouping-headers/

Greetings from Barcelona

Victor

[Mohammed Farook J]

Hi Victor, 

Thanks for your update. 

Query #1:  I would like to have some kind of page size controls for the grid. 

We have analyzed your query and please find the below paging documentation and online demo for your reference, 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/paging  

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/paging/?no-cache=1#paging  

Query #2: I would like to collapse a group of stacked headers. 

We have prepared a custom sample to collapse a group of stacked headers as per your requirement. In the below sample, using template in headerText we have rendered an icon and on the click function we have shown or hidden the ‘Fright’ column. Please refer to the below sample for your reference, 

Code Example: 

... 

    dataBound(args){ 

          document.getElementById("iconClick").onclick = (e) => { 

            if((e.target as any).classList.contains("exp")){ 

            this.grid.getColumns()[2].visible = true; 

            this.headerChanged = true; 

            this.grid.refresh(); 

            } 

            else if((e.target as any).classList.contains("col")){ 

            this.grid.getColumns()[2].visible = false; 

            this.headerChanged = true; 

            this.first = true; 

            this.grid.refresh(); 

          } 

        } 

    } 

    actionBegin(args){ 

      if(args.requestType == "refresh" && this.headerChanged){ 

        if(document.getElementById("iconClick").classList.contains("exp") && !this.first){ 

          document.getElementById("iconClick").classList.remove("exp"); 

          document.getElementById("iconClick").classList.add("col"); 

          this.headerChanged = false; 

        } 

        this.first =  false; 

        } 

      } 

... 

Sample: https://stackblitz.com/edit/angular-5xap6r-e1wehr?file=stacked-header.component.ts  

Query #3: I would like to edit the value of a column that is also a grouping column to change the group it belongs to.. 

We have analyzed your query and by default grid changes in dataSource will affect the group operation only when any other action are performed or in the grid refresh event. So to achieve your requirement, we suggest to use the actionComplete evet and in the event we have called the refresh method of the grid after the update. Please refer to the below sample for your reference, 

Code Example: 

... 

     actionComplete(args){ 

      if(args.requestType === "save"){ 

        this.grid.refresh(); 

      } 

    } 

... 

Sample: https://stackblitz.com/edit/angular-fzcc4w-gdbqhd?file=grouping.component.ts  

Query #4: I would like to show and hide the grouping bar onlu when there is a group. 

When the groupDropArea is rendered in the grid with respect to the grid height, so adding or removing group drop area would affect the grid height. To achieve your requirement, we suggest to set a static height to the grid by calculating from the group drop area height. Please refer to the below sample for your reference,  

Code Example: 

... 

     hide(){ 

      this.dropAreaHeight = (this.grid.element.querySelectorAll(".e-groupdroparea")[0] as any).offsetHeight; 

      (this.grid.groupModule as any).groupSettings.showDropArea = false; 

      this.grid.height = (this.grid.getContent()as any).offsetHeight + this.dropAreaHeight; 

      this.grid.refresh(); 

    } 

 

    show(){ 

      (this.grid.groupModule as any).groupSettings.showDropArea = true; 

      this.grid.height = (this.grid.getContent()as any).offsetHeight - this.dropAreaHeight; 

      this.grid.refresh(); 

    } 

... 

Sample: https://stackblitz.com/edit/angular-fzcc4w-gdbqhd?file=grouping.component.ts  

Query #5: Quite a few of the pages of the documentation are not working. 

We have internally fixed the documentation issues and the documentation will be properly work in online on Volume 4 release which is expected to roll out by December month. We are appreciating your patience until then.

Refer to the below links for the ListView Components.  

Render ListView with Hyper Link Navigation: https://ej2.syncfusion.com/angular/documentation/listview/how-to/render-listview-with-hyper-link-navigation/  

Display Spinner until List Items are loaded: https://ej2.syncfusion.com/angular/documentation/listview/how-to/display-spinner-until-list-items-are-loaded/  

API: https://ej2.syncfusion.com/angular/documentation/api/list-view/  

Please get back to us for further assistance. 

 

Regards, 

J Mohammed Farook