Paging and filtering wijmo grid

Paging and filtering wijmo grid

Posted by: milind.soman01 on 22 August 2019, 10:02 am EST

• 

  milind.soman01

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 August 2019, 10:02 am EST

  i am trying implement paging and filtering.
  
  I added below code

  
     <div class="col-md-5">
                      <input number-input type="text" class="form-control" placeholder="0 or empty is for no paging." [(ngModel)]="cvPaging.pageSize" />
                  </div>
                  <div class="btn-group col-md-7"  >
                      <button type="button" class="btn btn-default"
                              [disabled]="cvPaging.pageIndex <= 0"
                              (click)="cvPaging.moveToFirstPage()">
                          <!-- <span class="glyphicon glyphicon-fast-backward"></span> -->
                      </button>
                      <button type="button" class="btn btn-default"
                      [disabled]="cvPaging.pageIndex <= 0"
                      (click)="cvPaging.moveToPreviousPage()">
                           <span class="glyphicon glyphicon-step-backward"></span> 
                      </button>
                      <!-- <div  class="btn btn-default" disabled style="width:100px"> 
                          {​{'cvPaging.pageIndex' + 1 | number}​}
                          / {​{'cvPaging.pageCount' | number}​}
                       </div>  -->
                      <button type="button" class="btn btn-default"
                      [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
                      (click)="cvPaging.moveToNextPage()">
                          <span class="glyphicon glyphicon-step-forward"></span> 
                      </button>
                      <button type="button" class="btn btn-default"
                      [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
                      (click)="cvPaging.moveToLastPage()">
                          <span class="glyphicon glyphicon-fast-forward"></span> 
                      </button>
                  </div>
  
  
  

  but its not working.UI rendering is failing because of below code

  
       <div  class="btn btn-default" disabled style="width:100px"> 
                          {​{'cvPaging.pageIndex' + 1 | number}​}
                          / {​{'cvPaging.pageCount' | number}​}
                       </div>  
  
  

  could you please suggest on paging and filtering.
  
  Thanks
  
  Milind Soman

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 August 2019, 12:28 am EST

  Hi Millind,

  To add a paging element to the FlexGrid in Angular2, you may simply use the component. Please refer to the code snippet and the sample below:

  <wj-flex-grid #grid [itemsSource]="source">
  </wj-flex-grid>
  
  
  
  <wj-collection-view-pager [cv]="source"></wj-collection-view-pager>
  

  https://stackblitz.com/edit/angular-s77erb

  PS: You will need to import the WjInputModule angular2 module in app.module.ts file to use collection view pager.

  Regarding Filtering:

  Could you please let me know what issue you are facing regarding filtering in FlexGrid so I can provide you a solution.

  Regards,
  
  Ashwin

  API Reference:

  • "* “Pager: https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_input.wjcollectionviewpager.html”
    
    "
• 

  milind.soman01

  • Post Options:
  • Link
    Copy

  Posted 23 August 2019, 11:13 am EST

  Hi Ashwin,

  Thanks !
  
  paging is working is working fine.

  Filtering
  
  is adding a filter on each column.

  But i want a filter text box where in user can type and that text will be searched in grid columns

  I added below code in html

  
   <wj-input-mask #mask (valueChanged)="flex.collectionView.refresh()" [(value)]="filterText" [placeholder]="'Enter filter text...'">
            </wj-input-mask>
  
  

  code in ts file

  
  grid.collectionView.filter=(item)=>{
        if(item['name'].indexOf(this.filterText)>-1||item['age'].indexOf(this.filterText)>-1)
          return true;
        return false;
      }
  
  

  Above code is not throwing any exception but its not working

  Please suggest

  Regards,
  
  Milind

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 1:20 am EST

  Hi Millind,

  Please refer to the link below that demonstrates how to implement filtering using an input box.

  https://www.grapecity.com/wijmo/demos/Grid/FilteringSearching/Filter/angular

  ~regards

• 

  milind.soman01

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 6:14 am EST

  Thanks Ashwin…

  could you please suggest how to customize the look and feel .i.e apply customize css

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 12:25 am EST

  Hi Milind,

  Since the filtering box is an input element, you may customize it using CSS as you wish. Most of the time, you may use a different library to change the look and feel of the element, like in the sample provided, we have used bootstrap to customize the input element.
  
  To customize the look of the FlexGrid, please refer to the documentation and some samples below:

  • “* " https://www.grapecity.com/wijmo/docs/GettingStarted/Styling-Controls”
  • “https://www.grapecity.com/wijmo/docs/GettingStarted/Pseudo-Classes”
  • “https://www.grapecity.com/wijmo/demos/Grid/Styling/Rows/Overview/angular”
  • “https://www.grapecity.com/wijmo/demos/Grid/Styling/Columns/angular”
  • “https://www.grapecity.com/wijmo/demos/Grid/Styling/Hover/angular”
    
    "

  ~regards

• 

  milind.soman01

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 11:04 am EST

  Thanks Ashwin. Will look into above links and let you know

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 11:15 pm EST

  Hi,

  Yes, please take your time to explore and let us know if you have any queries.

  ~regards

• 

  milind.soman01

  • Post Options:
  • Link
    Copy

  Posted 6 September 2019, 10:48 am EST

  Hi Ashwin
  
  In chrome browser, I am getting below error on click of “+”
  
  main.b70b9a8d7f058de842a7.js:1 ERROR TypeError: Cannot set property renderWidth of [object Object] which has only a getter at X (main.b70b9a8d7f058de842a7.js:1) at n._copy (main.b70b9a8d7f058de842a7.js:1) at X (main.b70b9a8d7f058de842a7.js:1) at n.initialize (main.b70b9a8d7f058de842a7.js:1) at main.b70b9a8d7f058de842a7.js:1 at n.deferUpdate (main.b70b9a8d7f058de842a7.js:1) at new n (main.b70b9a8d7f058de842a7.js:1) at e.createGrid (main.b70b9a8d7f058de842a7.js:1) at e.createDetailCell [as _createDetailCellFn] (main.b70b9a8d7f058de842a7.js:1) at e._createDetailCell (main.b70b9a8d7f058de842a7.js:1)"

  Any idea??

  It is working fine in IE

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 September 2019, 11:57 pm EST

  Hi,

  I am sorry but I was not able to find the cause of the issue using the error log provided. But, from what I understand, you are trying to create a FlexGrid detail cell. Please refer to the sample below that demonstrates the same. Could you please modify the sample so that it replicates the issue.

  https://stackblitz.com/edit/angular-r3f66d

  ~regards