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 class="btn-group col-md-7" >
    <button type="button" class="btn btn-default"
    [disabled]="cvPaging.pageIndex <= 0"
    <!-- <span class="glyphicon glyphicon-fast-backward"></span> -->
    <button type="button" class="btn btn-default"
    [disabled]="cvPaging.pageIndex <= 0"
    <span class="glyphicon glyphicon-step-backward"></span>
    <!-- <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"
    <span class="glyphicon glyphicon-step-forward"></span>
    <button type="button" class="btn btn-default"
    [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
    <span class="glyphicon glyphicon-fast-forward"></span>

    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}​}

    could you please suggest on paging and filtering.
    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-collection-view-pager [cv]="source"></wj-collection-view-pager>

    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.


    API Reference:

  • Replied 23 August 2019, 2:13 am EST

    Hi Ashwin,

    Thanks !
    paging is working is working fine.

    <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...'">

    code in ts file

    return true;
    return false;

    Above code is not throwing any exception but its not working

    Please suggest

  • 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.

  • 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:

  • 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


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

  • 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
  • Marked as Answer

    Replied 8 September 2019, 2:57 pm EST


    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.

Need extra support?

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

Learn More

Forum Channels