Questions on KendoReact Forum

3 answers

665 views

I don't see how to trigger the display of a validation message. The stackblitz examples from https://www.telerik.com/kendo-react-ui/components/inputs/input/forms/ don't offer much insight. I don't have my inputs in a form, and I want to control when the validation popup is displayed. Can it be set to display for a time interval? Or is it on/off?

Help appreciated

General Discussions

answered on 28 Aug 2018

2 answers

69 views

GridColumn isn't being interpreted

Hi,

I'm trying to implement a grid table using data which is an array of objects. Currently, my code looks something like this:

let data = [
{
test: "test",
dog: "dog",

cat: "asld"
},
{
test: "afljsdojf",
dog: "cat",

  cat: "sadfasdf"
      }
    ];

When it renders, by my interpretation it should show a table with two columns, with headers "Test" and "Dog!". Instead it shows a table with headers "test", "dog", and "cat", so essentially it's ignoring the <GridColumn> tags.

Any advice would be appreciated!

General Discussions

answered on 24 Aug 2018

2 answers

529 views

Multiselect prevent collapse after selecting item

Hi,

I have a question about react multiselect component. How I can prevent collapse after I select item from multiselect. I saw in your api, it has onClose prop, which I should definitely use, but cant find anything, where I can .preventDefault() function.

https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/

Thanks.

General Discussions

answered on 17 Aug 2018

12 answers

500 views

TreeList with inline edit and drag&drop

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

231 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

74 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

388 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

533 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

93 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