Questions on KendoReact Forum

12 answers

577 views

I have a question about TreeList wrapper component. I need exactly this component.

https://www.telerik.com/kendo-react-ui/wrappers/treelist/editing/

But is it possible to do drag&drop there? I need to move objects only in their own array, I dont need them to move to their parent / child.

Another thing is that I want to active inline edit just by click on some cell, as you can see here: https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/.

If those two requests arent possible in this TreeList component, is it somehow possible to manage that via react grid component since it supports inline edit and drag&drop, but problem for me is, that each detail grid creates his own table which I dont need.

Wrappers for React

answered on 16 Aug 2018

7 answers

267 views

Kendo React Grid and WebPack 4 conflicts

Hi,

I trying to incorporate Kendo React Components with an existing React SPA.

Trying I can successfully add a grid to a page, here is a snippet of my Component:

import * as React from 'react';

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

export const icon: string = "fa fa-grid";

export const title: string = "Inline Grid";

interface IData {

id: string;

name: string;

description: string;

}

interface IState {

data: Array<IData>;

}

interface IProps {

};

export class InlineEditGrid extends React.Component<IProps, IState> {

constructor(props: IProps) {

super(props);

this.state = {

data: [

{

id: "00001",

name: "Name",

description: "Testing 1, 2, 3",

}

]

}

public render() {

return (

<div className='row'>

<div className='col-xs-12'>

<Grid

data={this.state.data}>

<GridToolbar>

<button

title="Save Changes"

className="k-button">

Save Changes

</button>

<button

title="Cancel Changes"

className="k-button">

Cancel Changes

</button>

</GridToolbar>

<Column field="id" title="Id" width="50px" editable={false} />

<Column title="Product Name" width="150px" field="name" />

<Column title="Description" width="200px" field="description" />

</Grid>

</div>

);

}

The problem is, I doesn't detect the GridToolbar or the GridColumns, so my GridToolbar is not visible and my columns aren't formatted as required.

Troubleshooting the problem I took a peek into my node_modules folder under @progress\kendo-react-grid\dist\es\Grid.js to see how the Grid component detects GridToolbars and GridColumns. I found the following:

Grid.prototype.render = function () {

...

var children = React.Children.toArray(this.props.children);

this.initColumns(children.filter(function (child) { return child && child.type === GridColumn; }));

var toolbar = children.filter(function (child) { return child && child.type === GridToolbar; });

...

}

As I am using Webpack to bundle my script files, including vendor imports, I has a look at the file Webpack generated script file to see how it was imported:

Grid.prototype.render = function () {

...

this.initColumns(children.filter(function (child) { return child && child.type === _GridColumn__WEBPACK_IMPORTED_MODULE_3__["default"]; }));

var toolbar = children.filter(function (child) { return child && child.type === _GridToolbar__WEBPACK_IMPORTED_MODULE_17__["default"]; });

...

}

As you can see Webpack has replaced the type references with it's own types, hence the conditional statements can never resolve to true.

What is the best wayto configure webpack so it can import Kendo React components with causing the above issues?

Thanks.

Wrappers for React

answered on 15 Aug 2018

1 answer

99 views

Splitter

Will splitter be coming to React? Also, can you confirm that at present splitter does not have a react wrapper? I can't seem to find one.

General Discussions

answered on 15 Aug 2018

1 answer

426 views

Custom editor with input

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

607 views

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

121 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

152 views

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

194 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

292 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

122 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