We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141280 Dec 4,2018 08:00 AM UTC Dec 6,2018 05:24 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Victor Gallego
Asked On December 4, 2018 08:47 AM UTC

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 [Syncfusion]
Replied On December 5, 2018 10:10 AM UTC

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
Replied On December 5, 2018 11:59 AM UTC

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 [Syncfusion]
Replied On December 6, 2018 05:24 AM UTC

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, 



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; 
        } 
      } 
... 


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(); 
      } 
    } 
... 


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(); 
    } 
... 


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.  




Please get back to us for further assistance. 
 
Regards, 
J Mohammed Farook 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;