Paging allowedPageSizes showing buttons but nothing happening when you press them

[greenallparagonuk]

This is issue is probably down to how I'm implementing the grid, but the buttons to alter the amount of rows visible in the pages don't do anything.

I'm using typescript with tsx files, which is from the template I used to create the project from yeoman.

for the render i'm doing:

public render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.state.view === "Export"
                ? ParagonAdmin.renderExportsTable(this.state.exportData)
                : this.state.view === "Teams"
                    ? ParagonAdmin.renderTeamTable(this.state.teamData)
                    : this.state.view === "Jobs"
                        ? ParagonAdmin.renderJobsTable(this.state.jobData)
                        : <p>Error</p>;

        return <div>
            <div className="navigation-contextual navigation-main">
                <ul>
                    <li><a className="btn menu-btn" >Teams</a></li>
                    <li><a className="btn menu-btn" >File Extract Log</a></li>
                    <li><a className="btn menu-btn" >Global Address</a></li>
                    <li><a className="btn menu-btn" >Reg Ex Report</a></li>
                </ul>
            </div>
            <h1>Administration</h1>
            {contents}
        </div>;
    }

and the function is:

`private static renderJobsTable(dataJobs: JobsData[]) {
        const pagesizes = [5, 10, 15, 0];
        return <div>
            <Grid rows={dataJobs} columns={[{ name: 'JcId', title: 'Id' }, { name: 'JmCustref1', title: 'Customer Reference' }, { name: 'JcDescription', title: 'Description' }]}>
                <FilteringState defaultFilters={[]} />
                <LocalFiltering />
                <SortingState />
                <LocalSorting />
                <PagingState
                    defaultCurrentPage={0}
                    pageSize={25}
                />
                <LocalPaging />
                <TableView />
                <TableHeaderRow allowSorting />
                <PagingPanel />
                <TableFilterRow />
            </Grid>
        </div>;
    }`

[kvet]

Hi,
 
I did not see that you pass a value to the allowedPageSizes property to the PagingPanel plugin.
 
Follow the steps defined in the article about specifying available page sizes: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/paging/#page-size-selection

[greenallparagonuk]

Sorry I was desperately trying to get it to work, looks like I un-did one too many.

It looked like
<PagingPanel allowedPageSizes={pagesizes}/>

I know it works, as it works on the demo! Just don't know what I've done to stop it from working...

[kvet]

I have found that pageSize is not fully configured to work in the controlled mode. See more info about the controlled and uncontrolled modes: https://devexpress.github.io/devextreme-reactive/react/grid/docs/#controlled-and-uncontrolled-modes
 
You can fix the issue by turning pageSize into the uncontrolled mode. Simply change the pageSize property to defaultPageSize.

[kvet]

I'm closing this issue. Feel free to reopen it if you need any further assistance.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.