This is a migrated thread and some comments may be shown as answers.

Kendoreact Grid paging

2 Answers 256 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Gaurav
Top achievements
Rank 1
Gaurav asked on 13 Jan 2021, 09:13 PM

hi,

I am using KendoReact grid and paging and have a grid something like below. we have some filters outside the grid that are applied on grid. And we are using react-redux to preserve the filters state so that grid can be recreated again as per the filters selected on redirection.

can we also add the pagesize to redux so that its value can also be preserved and the same number of records remain selected or shown on redirection.

I am not sure if there is any event that we can use for this purpose. any help will be appreciated.

<Grid
          sortable
          filterable
          resizable
          reorderable
          pageable={{
            buttonCount: 4,
            pageSizes: [10, 20, 50, 100, formsList.length],
          }}
          data={process(formsList, dataState)}
          {...dataState}
          onDataStateChange={(e) => {
            setDataState(e.data);
          }}
          cellRender={customCellRender}
          headerCellRender={customHeaderRender}
        >
          {user && isAuthenticated && user.isAdmin && (
            <GridToolbar>{getFormFilters()}</GridToolbar>
          )}
          <GridColumn field="formNumber" title="Number" />
          <GridColumn width="300px" field="formTitle" title="Form Title" />
          <GridColumn
            width="200px"
            field="formattedRevisionDate"
            title="Revision Date"
            headerClassName="text-wrap"
            filter={"date"}
            format="{0:M/d/yyyy}"
          />
          <GridColumn field="formStatus" title="Status" />
          <GridColumn field="notes" title="Notes" />
          <GridColumn field="responsibleOffice" title="Office" width="175px" />
          <GridColumn
            field="procedureNumber"
            title="Procedure"
            cell={procedureCell}
          />
          <GridColumn
            title="Available Formats"
            field="attachmentTypes"
            cell={attachmentsCell}
            headerClassName="text-wrap"
          />
          <GridColumn
            filterable={false}
            sortable={false}
            title="Actions"
            cell={actionsCell}
          />
        </Grid>

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 14 Jan 2021, 05:59 AM

Hello, Gaurav,

Yes, this is possible.

I see that the Grid already uses the onDataStateChange event which contains the paging information as well.

Additionally, the onPageChange event can be used to take only the paging information:

https://www.telerik.com/kendo-react-ui-develop/components/grid/api/GridProps/#toc-onpagechange

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Gaurav
Top achievements
Rank 1
answered on 14 Jan 2021, 08:21 PM
Thanks Stefan! That made it easier for me.
Tags
General Discussions
Asked by
Gaurav
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Gaurav
Top achievements
Rank 1
Share this question
or