React grid Pagination & filtering

7 posts, 0 answers
  1. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 25 Oct 2018 Link to this post

    Hi,

     

    In my grid I have both the options filtering and pagination. When I went to page 2 and type something in filter to search it will show filtered record in page 1 but in the pagination I can still see page 1 and page 2. Please find attached screenshot for same. 

     

    Scrrenshot 1 (Seact-grid-Pagination-1.png)

    I have list of records in gridI

    Scrrenshot 2 (React-grid-Pagination-2.png)

    I moved to page 2 and try to search record present in page 1 (for example : Parag)I

    Scrrenshot 3 (React-grid-Pagination-3.png)

    Filtration works and I can see result in page 1 but still I can see page 1 and page 2 both. Please help

    //Code

    pageChange = (event) => {
    this.setState({
    skip: event.page.skip,
    take: event.page.take
    });
    }

    <Grid
    data=
    {filterBy(this.state.data, this.state.filter)
    .slice(this.state.skip, this.state.take + this.state.skip)
    }
    skip={this.state.skip}
    take={this.state.take}
    total={this.state.data.length}
    onPageChange={this.pageChange}
    pageable={true}
    resizable
    onItemChange={this.itemChange}
    editField="inEdit"
    filterable
    filter={this.state.filter}
    onFilterChange={(e) => {
    this.setState({
    filter: e.filter
    });
    }}
    >
    <GridToolbar>
    <button
    title="Add new"
    className="k-button k-primary"
    onClick={this.enterInsert}
    >Add new
    </button>
      {
    this.state.data.filter(p => p.inEdit).length > 0 && (
    <button
    title="Cancel current changes"
    className="k-button"
    onClick={() => this.setState({ data: sampleList.slice() })}
    >Cancel current changes
    </button>
    )}
    </GridToolbar>
    <GridColumn field="Id" title="Id" width="50px" editable={false} filterable={false} />
    <GridColumn field="FullName" title="Full Name" cell={DropDownCell} />
    <GridColumn field="EmployeeId" title="Employee Id" editor="numeric" format="{0:#####}" filter="numeric" />
    <GridColumn field="BirthDate" title="BirthDate" editor="date" format="{0:d}" filter="date" editable={true}/>
    <GridColumn field="FirstName" title="First Name" cell={firstNameCell} />
    <GridColumn field="MiddleName" title="Middle Name" />
    <GridColumn field="LastName" title="Last Name" cell={lastNameCell} />
    <GridColumn cell={this.CommandCell} filterable={false} />
    </Grid>
  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 26 Oct 2018 Link to this post

    Hello, Parag,

    Thank you for the details.

    This occurs because the total is based on the length of the data in the state and the filter is applied before passing it to the Grid. This leads to a case where the data in the state is still 6 records, where the one passed to the Grid after the filterBy function is less.

    Please set the total property to be dynamically determined based on the actual data passed to the Grid after filtering.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 29 Oct 2018 in reply to Stefan Link to this post

    Hi Stefan,

     

    Do you have any sample example for this?

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 30 Oct 2018 Link to this post

    Hello, Parag,

    The following example is providing both filtering and paging and can be used for reference:

    https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations/

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. mohammed
    mohammed avatar
    2 posts
    Member since:
    May 2019

    Posted 21 Mar 2020 in reply to Stefan Link to this post

    Hi Stephan,

     

    I want only One input field, sort the grid data?

    Didi you have any example?

  6. mohammed
    mohammed avatar
    2 posts
    Member since:
    May 2019

    Posted 21 Mar 2020 Link to this post

    Hi Stephan,

     

    I have only one input field. If i enter the one character in the input field. Search the grid the particular character and show only the particular character are there in the grid. 

    Did you have any example for above requirement.

  7. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 23 Mar 2020 Link to this post

    Hello, Mohammed,

    Based on the description, this sounds like a single search box for the entire Grid.

    If this is the case, please check the following post for this feature with an example available:

    https://feedback.telerik.com/kendo-react-ui/1431905-support-of-search-panel-in-the-grid-component

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top