React grid Pagination & filtering

[Parag]

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>

[Stefan]

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

[Parag]

Hi Stefan,

 

Do you have any sample example for this?

[Stefan]

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

[mohammed]

Hi Stephan,

 

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

Didi you have any example?

[mohammed]

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.

[Stefan]

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