Questions on KendoReact Forum

1 answer

914 views

Hi,

I've got a dropdown list but the items in that list are wider than the default value. I'm using itemRender and valueRender to change them.

Is there a way to change the k-list-container width, can I add my own class to the popup or specify a width directly to this?

Thanks

General Discussions

answered on 07 May 2020

1 answer

88 views

Editor.d.ts file missing props like value and onChange

Hi Team,

I am not able find property like value and onChange in Editor.d.ts file of kendo react editor. I am using the 3.12.0 version of kendo react editor and only below properties are available in Editor.d.ts file. But as per documentation, editor also have properties like value and onChange.

static propTypes: {
        defaultContent: PropTypes.Requireable<string>;
        defaultEditMode: PropTypes.Requireable<string>;
        contentStyle: PropTypes.Requireable<object>;
        dir: PropTypes.Requireable<string>;
        className: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        tools: PropTypes.Requireable<any[]>;
        onMount: PropTypes.Requireable<(...args: any[]) => any>;
        onPasteHtml: PropTypes.Requireable<(...args: any[]) => any>;
        onExecute: PropTypes.Requireable<(...args: any[]) => any>;
    };

I reinstalled the kendo react editor or even removed the node modules file. Even after that the properties are not available for Editor component.

Please let me know if I am missing something here.

Regards,

Sanjay

General Discussions

answered on 07 May 2020

2 answers

500 views

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

560 views

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

215 views

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

78 views

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

523 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

261 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

335 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

142 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