How to display next group item, once collapsed group in wj-group-panel?

How to display next group item, once collapsed group in wj-group-panel?

Posted by: ramu on 26 October 2017, 5:00 pm EST

• 

  ramu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 October 2017, 5:00 pm EST

  Hi,

  I have used Wijmo 5.20171.282 version.

  Here my code at below:

  <wj-group-panel [grid]=“flex” [placeholder]=“‘Drag columns here to create groups.’” [maxGroups]=“1”>

  <wj-flex-grid #flex [itemsSource]=“data”> …

  {{data?.pageIndex+1}}/{{data?.pageCount}}

  My total collection count is 30. First group contains 20 items, next group contain 5 items, finally last group contains 5 items. My flex grid pagesize is 10. So paging was display 1/3 initially.

  Once I collapsed first group, I couldn’t see next group immediately with in the 1 page. Once I navigate through paging 2, again navigate to last page I can see my another groups.

  I am frustrating output like this. If I have huge no of records in one group, even i collapsed that group, navigate the paging…

  How to resolve this issue?

  Thanks,
  
  Ramu

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 5:14 pm EST

  Here my code at below:

  
  
   <wj-group-panel [grid]="flex" [placeholder]="'Drag columns here to create groups.'" [maxGroups]="1"></wj-group-panel>
  
   <wj-flex-grid #flex [itemsSource]="data"> </wj-flex-grid>
  
  <div class="btn-group">
                                      <button type="button" class="btn btn-default hidden" (click)="data.moveToFirstPage()">
                                          <span class="glyphicon glyphicon-fast-backward"></span>
                                      </button>
                                      <button type="button" class="btn btn-default" (click)="data.moveToPreviousPage()">
                                          <span class="glyphicon glyphicon-chevron-left"></span>
                                      </button>
                                      <button type="button" class="btn btn-default ng-binding">
                                          {{data?.pageIndex+1}}/{{data?.pageCount}}
                                      </button>
                                      <button type="button" class="btn btn-default" (click)="data.moveToNextPage()">
                                          <span class="glyphicon glyphicon-chevron-right"></span>
                                      </button>
                                      <button type="button" class="btn btn-default hidden" (click)="data.moveToLastPage()">
                                          <span class="glyphicon glyphicon-fast-forward"></span>
                                      </button>
                                  </div>
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 4:15 pm EST

  Hi Ramu,
  
  Currently, this is not possible since Grouping and paging applies at CollectionView level and Group collapse and expand applies at FlexGrid level. Hence, on collapsing Group, current page shows only one records.

  You can show further records by setting pageSize to 0 on groupCollapsedChanging and set back to original page size on groupCollapsedChanged event for FlexGrid.

  ~Manish

• 

  ramu

  • Post Options:
  • Link
    Copy

  Posted 29 October 2017, 7:37 pm EST

  Hi Manish,

  My default current page size is 10.

  
  <wj-flex-grid #flex [itemsSource]="data" (groupCollapsedChanging)="onGroupCollapsedChanging()" 
  (groupCollapsedChanged)="onGroupCollapsedChanged()"> </wj-flex-grid>
  
  onGroupCollapsedChanging() {
          this.data.pageSize = 0;
      }
  
      onGroupCollapsedChanged() {      
          this.data.pageSize = 10;       
      }
  
  

  Once I collapsed first group in paging #1, nothing collapsed all the groups still expanded.

  Moved to second paging #2 then collapsed the group, Its redirect to first paging with all the groups are expanded.

  How to maintained the current page as well collapsed the group which one I clicked?

  Thanks,
  
  Ramu

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 October 2017, 5:12 pm EST

  HI Ramu,
  
  This issue required further investigation, hence this issue is forwarded to the concerned team for further investigation with tracking id 294598.

  We will let you know as we get update.

  ~Manish

• 

  bernardo-castilho

  • Post Options:
  • Link
    Copy

  Posted 6 November 2017, 11:52 pm EST

  We did get this request from some users a while ago, and created a sample to show how you can accomplish this (outline-aware paging).

  Here’s the link, the sample readme contains more details:

  http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/FlexGridPager

  I hope this helps.