Questions on KendoReact Forum

1 answer

78 views

I'm using Kendo react inline editing feature.This is my code...

cancel = dataItem => {
    const originalItem = this.state.DataSet.find(p => p.id === dataItem.id);
    const data = this.state.DataSet.map(item =>
      item.id === originalItem.id ? originalItem : item
    );
    this.setState({ DataSet: data, errors: [] });
    this.DataList();
  };

In this cancel method i'm calling this.DataList() which is a get request to the server. If i remove this line of code the inEdit is not closing.......So how can i close the inline method without writing this line?

General Discussions

answered on 28 Nov 2019

1 answer

191 views

Binding Multiple Api in Kendo Grid

My requirment is to display data from multiple Api into the grid , how can i manage the fields?

General Discussions

answered on 27 Nov 2019

1 answer

103 views

boxPlot type not working

Attempting to following the example shown here: https://www.telerik.com/kendo-react-ui/components/charts/series-types/box-plot/.

However, I can use "verticalBoxPlot" (which there is no demo for, but I found in the api docs), and that works fine. Even if I go to the API documentation, "boxPlot" is missing: https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesItemProps/#toc-type.

General Discussions

answered on 26 Nov 2019

8 answers

565 views

Custom dropdownlist in toolbar of Kendo React Editor

I'd love exactly this functionality, but using KendoReact:

Working Dojo Example in response to this post

Am a bit confused as to what properties translate over to where-- how would you implement this using the Kendo React editor? Is this possible?

General Discussions

answered on 25 Nov 2019

2 answers

279 views

Multiple Kendo React Editors

Hello,

Trying to add multiple Editors on a single page, and get the HTML from each. The issue is, only the most recent ref is being found when I use the following code:

import React from 'react';

import ReactDOM from 'react-dom';

import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

const { Bold, Italic, Underline } = EditorTools;

class App extends React.Component {

textarea = null;

setEditorRef = ref => {

this.editor = ref

}

getHtml = () => {

console.log(this.editor)

const view = this.editor.view;

this.textarea.value = EditorUtils.getHtml(view.state);

}

render() {

return (

<div>

<Editor

tools={[

[ Bold, Italic, Underline ]

]}

contentStyle={{ height: 160 }}

defaultContent={'<p>editor sample html1</p>'}

ref={this.setEditorRef}

/>

<Editor

tools={[

[ Bold, Italic, Underline ]

]}

contentStyle={{ height: 160 }}

defaultContent={'<p>editor sample html2</p>'}

ref={this.setEditorRef}

/>

<br />

<button

className="k-button k-button-icontext"

onClick={this.getHtml}

>

<span className="k-icon k-i-arrow-60-down" />Gets HTML

</button>

<br /><br />

<textarea

className="k-textarea"

style={{ height: 100, width: '100%', resize: 'none' }}

defaultValue="<p>textarea sample html</p>"

ref={textarea => this.textarea = textarea}

/>

</div>

);

}

ReactDOM.render(

<App />,

document.querySelector('my-app')

);

How would I implement this?

General Discussions

answered on 25 Nov 2019

1 answer

956 views

Kendo Date picker Hides behind Dialog Box

I want to use the Date picker of kendo in a form.The Form is a Dialog Box and when i Click the Date button.The Calendar displays behind the Dialog Box and which cannot Select Any date and View the Full Calendar.

General Discussions

answered on 25 Nov 2019

3 answers

1.0K+ views

Kendo React Grid Support for React Hooks?

I am having issues using KendoReact grid components within React Functional Components using hooks such as useEffect. One issue is that if a ExcelExport component is used, a maximum limit of state updates is reached. Furthermore if a useEffect is used pointing to the state.data of a Kendo React Grid component, the data fires off any inline grid custom column cells which includes Kendo DropDowns.

Are hooks supported yet for Kendo React components, and if not, when can we expect support?

My environment is using the latest versions of Redux-Toolkit, React-Redux, Redux and React.

Thanks,

Jim Minnihan

SKF USA, Inc.

General Discussions

answered on 22 Nov 2019

5 answers

724 views

Kendo grid drag and drop

https://stackblitz.com/edit/react-zbhrxe?file=Hello.js

how can i drag a particular field in the same row, in the grid with using the reorder function.

in my grid i have star icon, which drags the entire column vertically but my requirement is to drag that star horizontally with in a particular grid column.

General Discussions

answered on 22 Nov 2019

1 answer

83 views

Grid paging buttons enabled when no records available

Hello,

I'd like to report a possible issue regarding Kendo Grid. When we put filters that does not return any rows we have paging buttons enabled that are responsible for moving to next/last page. To reproduce use an example from your site and put some silly filters e.g. in CustomerId.

General Discussions

answered on 21 Nov 2019

6 answers

1.0K+ views

DropDownList with Radio Button Not Working

I have a dialog popup with some scheduling options that I have created. For one component I have two radio buttons and each radio button is a set of DropDownLists and NumericTextBoxes. The radio button styling works fine with the NumericTextBox, but with the DropDownList I have problems with the dropdown actually opening. It will flicker when you click on it and you must click it multiple times before it will fully open and stay open. I have added the className="k-radio-label" to the DropDownList and that seems to be where my issue is. Is this a known bug and is there a workaround? The selection of the radio button is working, it just seems to be an issue with the dropdown animation.

Here is a snippet to give you some idea:

<div>

<label className="k-form-field display-inline">

<span>Every:</span>

<input

type="radio"

value="repeatWeek"

id="rptWeek"

className="k-radio"

checked={this.state.dayInterval === 'repeatWeek'}

onChange={this.handleRadio}

/>