Wijmo5 flexi grid pagination with paging numbers

Wijmo5 flexi grid pagination with paging numbers

Posted by: sudhakar-wd on 14 September 2017, 11:22 am EST

• 

  sudhakar-wd

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:22 am EST

  To my flexi grid, I am getting pagination with current page/total pages and previous and next page buttons.

  But i need pagination with page numbers (ex; 1,2,3,4,5,…). which is similar to wijmo 2.

  please see attached screenshot.
  
  

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hello,

  The paging UI is implemented outside of the grid. This gives you complete control over the appearance and functionality of the paging mechanism. There are two demo samples which depict paging in FlexGrid.

  The first demo sample i.e. http://demos.componentone.com/wijmo/5/Angular/FlexGridIntro/FlexGridIntro/ implements paging through buttons.

  And the second demo sample i.e. http://demos.componentone.com/wijmo/5/Angular/Explorer/Explorer/#/grid/paging implements paging through WjCollectionViewPager.

  In a similar manner, you can implement the pagination with page numbers. Kindly refer to the attached HTML Page which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2015/08/Numeric_Pager.html

• 

  sudhakar-wd

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Thank you MANPREET.KAUR.
  
  It works to me.

• 

  chinmaymahajanmns

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:22 am EST

  Hi Manpreet, I am using WIJMO-5 flex grid with angular2 but I am facing problem in pagination. I think it might be some syntactical error.
  
  I have pasted my code and also attached screenshot of my output please help me out with this.
  
  Thank you.

  <div class=“btn-group”>
  
  <button type=“button” class=“btn btn-default” (click)=“cvPaging.moveToFirstPage()” >
  
  <span class=“glyphicon glyphicon-fast-backward”></span>
  
  </button>

  <button type=“button” class=“btn btn-default” (click)=“cvPaging.moveToPreviousPage()” [disabled]=“‘cvPaging.pageIndex <= 0’”>
  
  <span class=“glyphicon glyphicon-step-backward”></span>
  
  </button>

  <button type=“button” class=“btn btn-default” disabled style=“width:100px”>
  
  {{cvPaging.pageIndex + 1 | number}} / {{cvPaging.pageCount | number}} // this statement is not executing
  
  </button>

  <button type=“button” class=“btn btn-default” (click)=“‘cvPaging.moveToNextPage()’” [disabled]=“‘cvPaging.pageIndex >= cvPaging.pageCount’”>
  
  <span class=“glyphicon glyphicon-step-forward”></span>
  
  </button>

  <button type=“button” class=“btn btn-default” (click)=“‘cvPaging.moveToLastPage()’” [disabled]=“‘cvPaging.pageIndex >= cvPaging.pageCount’”>
  
  <span class=“glyphicon glyphicon-fast-forward”></span>
  
  </button>
  
  </div>

  Note: Please pardon the appearance of Buttons i’ll fix the design later.

  Thank you
  
  

• 

  milind.soman01

  • Post Options:
  • Link
    Copy

  Posted 20 August 2019, 2:51 am EST

  Hi
  
  I am also facing similar issue as mentioned by chinmaymahajanmns.
  
  Please suggest

  Thanks
  
  Milind Soman