Questions on KendoReact Forum

1 answer

488 views

I have the following custom editor defined. The problem is that GridCell's onChange event expects a syntheticEvent to be passed. React.FormEvent<HTMLInputElement> does not contain a synthetic event. Help appreciated

Cell:

import { GridCell, GridCellProps } from '@progress/kendo-react-grid';

import * as React from 'react';

import { CodeEditor } from '../StatefulEditors/CodeEditor';

export class CodeCell extends GridCell {

tdElement: HTMLElement;

constructor(props: GridCellProps) {

super(props);

}

render() {

const value = this.props.dataItem[this.props.field];

const displayValue = (typeof value === 'undefined') ? '' : value.toString();

const defaultRendering = (!this.props.dataItem.inEdit) ?

(

<td className="code" ref={(e) => { this.tdElement = e as HTMLElement; }}>

{displayValue}

</td>

) : (

<td className="code">

<CodeEditor

dataItem={this.props.dataItem}

field={this.props.field}

displayValue={displayValue}

/>

</td>

);

return this.props.render

? this.props.render.call(undefined, defaultRendering, this.props)

: defaultRendering;

}

Editor:

import { GridCellProps } from '@progress/kendo-react-grid';

import * as $ from 'jquery';

import * as React from 'react';

import { Key } from 'ts-keycode-enum';

export interface CodeEditorProps extends GridCellProps {

field: string;

// tslint:disable-next-line:no-any

dataItem: any;

anchor?: HTMLElement;

displayValue: string;

}

export interface CodeEditorState {

value?: string;

}

export class CodeEditor

extends React.Component<CodeEditorProps, CodeEditorState> {

input: HTMLInputElement;

wrap: HTMLElement;

constructor(props: CodeEditorProps) {

super(props);

this.onChange = this.onChange.bind(this);

this.onFocus = this.onFocus.bind(this);

this.onKeyDown = this.onKeyDown.bind(this);

this.state = {

value: props.dataItem[props.field],

};

}

render() {

return (

<div ref={(e) => this.wrap = e as HTMLElement}>

<input

key="i"

className="k-textbox"

value={this.state.value}

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

onFocus={this.onFocus}

onKeyDown={this.onKeyDown}

onChange={this.onChange}

ref={(e) => this.input = e as HTMLInputElement}

/>

</div>

);

}

componentDidMount() {

$(this.wrap).on('mouseenter mouseleave', '.k-master-row', (e) => {

if (e.type === 'mouseenter') {

$(e.currentTarget).addClass('k-state-selected');

} else {

$(e.currentTarget).removeClass('k-state-selected');

}

});

}

private onKeyDown(e: React.KeyboardEvent) {

switch (e.keyCode) {

case Key.DownArrow:

break;

default:

break;

}

private onFocus() {

this.input.select();

}

private onChange(e: React.FormEvent<HTMLInputElement>) {

this.setState({ value: e.currentTarget.value });

// if (this.props.onChange) {

// this.props.onChange({

// dataItem: this.props.dataItem,

// field: this.props.field,

// syntheticEvent: new SyntheticEvent,

// value: e.currentTarget.value,

// });

// }

}

General Discussions

answered on 10 Aug 2018

1 answer

694 views

[Solved] Input component Width

Hello,

I'm trying to wake my Input component use all space he can occupy.

I saw here the props width, but it doesn't seems to work.

A little exemple.

https://next.plnkr.co/edit/WxYDfF0LWBRy4XtN?preview

Thanks,

Regard
Vincent.

Wrappers for React

answered on 06 Aug 2018

1 answer

156 views

React grid with Redux without mutation

Hi ,
Regarding the React Grid Component https://www.telerik.com/kendo-react-ui/components/grid/ and with Redux as the State Management, How do i go about implementing custom functionality like Inline Editing , Filtering, Sorting and the various other things implemented in the grid component to be used without mutating state ?
Thanks &Regards,
Francis P.

Wrappers for React

answered on 02 Aug 2018

7 answers

204 views

[Solved] TreeView doesn't update

Hello,

I'm building my TreeView using the redux store.

//in constructor

this.state = {

data: createDataSource(

//some store props

);

}

// in render

<TreeView

dataSource={this.state.data}

/>

When I add content in the store that have to be used by the TreeView componenent. It doesn't update.

At first, I throught it was because I init data in the constructor.

Do I did this :

<TreeView

dataSource={createDataSource(

// store props

)}

/>

Still no update, when I update my store.

Why the compomonent don't update ?

Thanks
Regard,

Wrappers for React

answered on 02 Aug 2018

1 answer

254 views

Font/Size dropdown display problems in Editor

Hi Sir/Madam,

I try to use Kendo UI Editor for React, and it works fine generally. But there is one problem: when I select the font as Arial, and then try to select another one from the drop down, the dropdown list appear in the left top page. It seems that same problem appears for all dropdown on the editor toolbar (e.g. font, font size, format, ...).

What may cause this problem?

Wrappers for React

answered on 30 Jul 2018

4 answers

366 views

Returning selected items from a MultiSelect

I'm trying to utilise the MultiSelect wrapper inside the Kendo Dialog component. I've been following the demos and reading the documentation and have set up a MultiSelect that gets data from an external source and displays it correctly. I now want to be able to pass the values that the user has selected back to the parent (Dialog) component and I'm not sure how to do so. I've read that there is a dataItems method that would retrieve what I need but I'm not sure how to access this in react, I can't find any examples to help.
Here is my component code:

class ChildQuestions extends React.Component {

constructor(props) {

super(props);

this.dataSource = new kendo.data.DataSource({

data: props.data

})

this.values= props.value

this.placeholder = "Enter a question text..."

}

render() {

return (

<div className="row">

<div className="col-xs-12 col-sm-6 example-col">

<MultiSelect

dataSource={this.dataSource}

placeholder={this.placeholder}

dataTextField={"Text"}

dataValueField={"id"}

value={this.values}

/>

</div>

);

}

export default ChildQuestions;

If you could provide some example code or any guidance that would be greatly appreciated!

Wrappers for React

answered on 26 Jul 2018

2 answers

171 views

Using a popup in grid cell and forceUpdate loses position

I want to show a grid for my custom editor with sorting functionality. I'm able to use Popup and reference the grid row td. Since GridCell isn't generic I can't define my own state so I've resorted to using class properties to store the data & sort order instead. This works but the grid isn't re-rendered on sort unless i .forceUpdate(). When I do that I lose my reference to my anchor point.

Do you think in the future GridCell extends could define their own state? Do you think allowing them to be generic might make sense?

Is there a way to prevent my Popup from losing its positioning?

Working example: https://next.plnkr.co/edit/AynMBNvtloQ881qt

Thanks!

General Discussions

answered on 19 Jul 2018

1 answer

287 views

[Solved] Custom editor that works with example pattern for onClick renders edit

I put together this plunkr to demonstrator my problem. I want to have a custom editor, but I also want to be able to switch the cell to edit mode onclick. The problem is with how editors are defined I can't pass in arguments to a constructor that could reference the enterEdit method like is shown with renderers.jsx. Columns that have cell defined skip the cellRender routine. I don't see any way to bind my custom editor cell to support an onClick method similar to how non-custom cells can. Help appreciated

https://next.plnkr.co/edit/JK1J5RxG2C6uBqrr

General Discussions

answered on 18 Jul 2018

2 answers

488 views

How to set a initial value for an Editor component

Hi,

I am using the "kendo-editor-react-wrapper" in my project, and I want to set a initial value for the Editor component. But I cannot find any helpful thing in EditorOption (including change, keyup, keydown, tools, …, etc.)

I know that I can use Editor.value() to set a value for an editor object, but how can I do this in React?

I found someone wrote like <Editor value={the_value} /> : https://stackoverflow.com/questions/48704782/kendo-editor-react-wrapper-display-an-error

But when I try to write like this, I got an error: " TS2339: [31mProperty 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Editor> & Readonly<{ children?: ReactNode; }> & Re...'.[39m"

ReactJS 15.6.1 and Typescript 2.4.1 are used in my project.

Maybe I have made some stupid mistakes, but I would be grateful if you could provide a solution or suggestion.

Wrappers for React

answered on 17 Jul 2018

2 answers

494 views

[Solved] TabStrip scrollable.

Hello,

I'm trying make a TabStip scrollable with the React component.
By default the scrollable propertie is false, How can I set it to true using the React Component ?

I checked this, but this is using Jquery.

I tried :

public componentDidUpdate() {

$(".k-tabstrip").kendoTabStrip({

scrollable: true,

});

}

But using this each time my component is update, is not really good...

And some weird bugs show up. (here)

This occurs when there is enought space to display all the tabs. When the last one is closed.

So 2 questions :
- How to make a scrollable TabStrip using the React component ?
- And if it's not possible, What viable alternative have we ?

Regards,
Vincent.