Questions on KendoReact Forum

2 answers

603 views

[Solved] How to load data in current page with React

Hello

I have a grid with many records in my DB. I want to only request the data that will be displayed on the selected page.
Ex. If I navigate to page 5 with a pageSize of 20, I will skip the first 80 records and receive the next 20.
This is working so far, but my issue is that when I receive those 20 records of data ; page 5 will show up empty since the data will only be displayed on page 1.

If i load all the data without splitting them, the program will crash.

I found a solution for angular, jquery (using serverPaging) but not with React.
What can I do to display my data on the specific page I'm on (in React), and basically ignore all the other pages when I'm not visiting them?

Thank you

this is my source code :

import { Grid, GridColumn } from '@progress/kendo-react-grid';

import React from 'react';

import ReactDOM from 'react-dom';

import axios from "axios";

import { filterBy } from '@progress/kendo-data-query';

class GridDocInput extends React.Component {

// c'est valeur sont a gardé uniquement dans le dev

terminalId = window.SERVER_DATA.terminalid;

functionId = window.SERVER_DATA.functionid;

hostname = window.SERVER_DATA.hostname;

funct = window.SERVER_DATA.funct;

// Let's our app know we're ready to render the data

componentDidMount() {

this.getPosts();

}

state = {

filter: {

logic: "and",

filters: []

},

skip: 0,

take: 25,

pageNumber: 1,

posts: [],

total_record: 10000

};

pageChange = (event) => {

this.setState({

skip: event.page.skip,

take: event.page.take,

pageNumber: (event.page.skip + event.page.take) / 25

},()=>{this.getPosts();});

}

render() {

return (

<div>

<Grid

style={{ height: '100%' }}

data={filterBy(this.state.posts,this.state.filter).slice(this.state.skip, this.state.take + this.state.skip)}

skip={this.state.skip}

take={this.state.take}

total={this.state.total_record}

onPageChange={this.pageChange}

pageable

filterable

sortable

filter={this.state.filter}

onFilterChange={(e) => {

this.setState({

filter: e.filter

});

}}

>

<GridColumn field="item_no" title="Code article"/>

<GridColumn field="description1" title="Description" />

<GridColumn field="uom_code" title="UOM code"/>

<GridColumn field="vendor_code" title="Code vendeur" />

</Grid>

</div >

);

}

getPosts() {

axios

// This is where the data is hosted

.post(

this.hostname+`in/ui/xitem.p?terminalid=` +

this.terminalId +

"&Funct=" + this.funct +

"&FunctionID=" + this.functionId +

"&pageSize=25" +

"&skip=" + this.state.skip +

"&take=" + this.state.take +

"&page=" + this.state.pageNumber +"&lastRecord=false"

)

// Once we get a response and store data, let's change the loading state

.then(response => {

this.setState({

posts: response.data.ProDataSet.tt_item,

total_record: response.data.ProDataSet.tt_Misc[0].total_record,

isLoading: false

});

})

// If we catch any errors connecting, let's update accordingly

.catch(error => this.setState({ error, isLoading: false }));

console.log("url: ", this.hostname+`in/ui/xitem.p?terminalid=` +

this.terminalId +

"&FunctionID=" +

this.functionId +

"&pageSize=25" +

"&skip=" + this.state.skip +

"&take=" + this.state.take +

"&page=" + this.state.pageNumber

);

}

export default GridDocInput;

General Discussions

answered on 05 May 2020

8 answers

745 views

[Solved] grid footercell data passing

Hi,

https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-footer-cells

The UnitsInStockCell component directly uses the products data. I don't see a way for the data to be passed through via the FooterCell props. What's are some options for passing the data down through props? Kind of like the sample code below

const UnitsInStockCell = (props) => {

// HERE --- if i wanted to reference the data from props.data instead, how can I do this?

const total = props.data.reduce((acc, current) => acc + current[props.field], 0);

return (

<td colSpan={props.colSpan} style={props.style}>

total: {total}

</td>

);

}

Thanks.

General Discussions

answered on 04 May 2020

2 answers

298 views

[Solved] Combobox datasource refresh

I have created a component which purely renders a kendoReact combobox that uses a datasource made by a SQL webservice (all self contained in the component). I then have this at the top of a form which will display data from the selected combobox item.

My question is if i amend or add a new record the combobox does not know that the data has changed and so does not refresh it's datasource. what is the best way to acheive this?

Many Thanks

General Discussions

answered on 04 May 2020

8 answers

147 views

[Solved] Using Virtualization with Grouping with hooks

I am interested in an example like https://stackblitz.com/edit/react-ynzwm7-thwt8x

But I want my application to use hooks.

Can Someone make an example like this with hooks please?

Thank you much

General Discussions

answered on 04 May 2020

6 answers

694 views

navigatable={true} not working in kendo react grid

Hi Team,

Navigatable={true} not working in kendo react grid

also i am unable to find navigation of react kendo documentation

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/

Is there a way i can implenment navigatable = {true} in react kendo grid

General Discussions

answered on 29 Apr 2020

3 answers

368 views

Few accessibility issues in kendo react grid

Hi Team,

I have 2 different issue in kendo react grid

1. Table header are not associated with the table data.

Actual Result:

When focus moves to the table Screen reader does not announce the Table header with the table data.Here screen reader announce as 'Column 3 Commercial Bangalore'.

Observation :

1. Here when focus lands on the table NVDA does not announce the information of the rows and column.

2. NVDA does not announce information for empty cell of table as blank when while navigating using table short cut keys(Ctrl+Alt+Arrows).

Expected Result:

When focus moves to the table Screen reader should announce the Table header with the table data.

Ex:Here screen reader should announces as 'Column 3 Commercial Bangalore Line of business button'

2.

Resizing page up to 400% is creating a loss of content or functionality

Actual Result:

Page content is not properly visible after resizing page to 400%.

Agent Extension page content is not properly visible after resizing page to 400%.

Expected Result:

Resizing page “Agent Extension” up to 400% should not create a loss of content or functionality.

General Discussions

answered on 29 Apr 2020

2 answers

422 views

Drill down in Kendo react column chart

Is it possible to get a click on each bar in a column chart ??

General Discussions

answered on 28 Apr 2020

1 answer

238 views

Grid loading complete

When I load my grid currently I'm getting no results flash up before my results display. Is there a way to know when the grid has finished loading so I can control this no results myself?

General Discussions

answered on 28 Apr 2020

1 answer

901 views

[Solved] Selecting multiple rows with checkboxes and shift key

I need a feature for react grid like the url below. Is it possible?

I need to select multiple rows with shift button. I need to able to select row range with shift button.

https://www.telerik.com/forums/selecting-multiple-rows-with-checkboxes-and-shift-key

General Discussions

answered on 28 Apr 2020

1 answer

1.2K+ views

[Solved] Customize the File upload in Kendo React

Hi,

I am using Upload functionality kendo react. Is there any possibility to customize the select file button and upload button. Here I attached the sample design.

General Discussions

answered on 28 Apr 2020