Paging and filtering wijmo grid

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

  • Posted 22 August 2019, 1: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
  • Replied 22 August 2019, 3:28 pm EST

    Hi Millind,

    To add a paging element to the FlexGrid in Angular2, you may simply use the <wj-collection-view-pager> 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:

  • Replied 23 August 2019, 2:13 am EST

    Hi Ashwin,

    Thanks !
    paging is working is working fine.

    Filtering
    <wj-flex-grid-filter></wj-flex-grid-filter> 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
  • Replied 25 August 2019, 4:20 pm 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
  • Replied 25 August 2019, 9:14 pm EST

    Thanks Ashwin..

    could you please suggest how to customize the look and feel .i.e apply customize css
  • Replied 26 August 2019, 3:25 pm 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:



    ~regards
  • Replied 27 August 2019, 2:04 am EST

    Thanks Ashwin. Will look into above links and let you know
  • Replied 27 August 2019, 2:15 pm EST

    Hi,

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

    ~regards
  • Replied 6 September 2019, 1: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
  • Replied 8 September 2019, 2: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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels