Questions on KendoReact Forum

6 answers

1.2K+ views

Filter exception in Kendo Ui Grid with React

Hello,

We are facing a problem with filtering in Kendo UI Grid in React. I'm getting following exception op() is not a functiondirectly after I select an operator (for example "Ist gleich"):

This is the stacktrace:

filter-no-eval.js:81 Uncaught TypeError: op is not a function
at filter-no-eval.js:81
at filter-no-eval.js:10
at count (array.operators.js:85)
at process (array.operators.js:151)
at KendoGrid.push../Global/Controls/KendoGrid.tsx.KendoGrid.render (KendoGrid.tsx:45)
at finishClassComponent (react-dom.development.js:13538)
at updateClassComponent (react-dom.development.js:13501)
at beginWork (react-dom.development.js:14090)
at performUnitOfWork (react-dom.development.js:16416)
at workLoop (react-dom.development.js:16454)

I tried the same example which is on the Kedno UI Grid for React website (https://www.telerik.com/kendo-react-ui/components/grid/advanced-examples/stateful-grid/), and there it is working fine. However, I could found that the filter object is not the same in the 2 cases.

This is the filter object structure in my case where im getting the exception:

This the filter object structure from the example in Kendo website:

Any suggestion or help is highly appreciated

Thanks in advance!

General Discussions

answered on 22 Oct 2018

2 answers

60 views

Field Chooser

Do you have any plans to introduce a Field Chooser similar to what is available on the jQuery controls?

General Discussions

answered on 22 Oct 2018

4 answers

57 views

GridColumn(s) don't become visible after visibility toggle

Hello!

I created this example to show this behavior.

After column (with no initial "width" value set) visibility toggles (become invisible and visible again) the column doesn't become visible.

It seems it's partially related to the end of this discussion.

General Discussions

answered on 22 Oct 2018

3 answers

90 views

Freeze Column in Native React Grid

Is there a way to freeze a column so that horizontal scrolling have those columns will not scroll out of view. Is there a sample of this?

General Discussions

answered on 18 Oct 2018

1 answer

72 views

GridNoRecords doesn't accept children

Hello!

There is a bug in GridNoRecords component — it doesn't accept children.

Version: 2.2.

In version 1.2 there were no such problem.

You can find it even in your official demo.

Expected result: "There is no data available" is visible if there is no data.

Actual result: default message "No records available" is visible if there is no data.

General Discussions

answered on 18 Oct 2018

7 answers

159 views

How to determine column that was moved by Column Reordering feature?

Given the following example from the official documentation:
https://stackblitz.com/run/?file=app%2Fmain.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
render() {
return (
<Grid
style={{ height: '400px' }}
data={products}
reorderable
>
<GridColumn field="ProductID" title="ID" width="45px" />
<GridColumn field="ProductName" title="Name" width="250px" />
<GridColumn field="Category.CategoryName" title="CategoryName" />
<GridColumn field="UnitPrice" title="Price" width="80px" />
<GridColumn field="UnitsInStock" title="In stock" width="80px" />
</Grid>
);
}
}

ReactDOM.render(<App />, document.querySelector('my-app'));

I need to know what column was exactly reordered from the ui perspectives. Following by https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-oncolumnreorder API I can subscribe to only event that gives me the new columns (including the reordered one). How is possible to know what column was reordered by dragging and dropping feature?

General Discussions

answered on 18 Oct 2018

6 answers

359 views

Too slow to load multiple Editors in single page in React project.

Due to business requirement, I need to include more than 30 Kendo Editor components in my React project, but the it is too slow to complete loading the page.

In my below testing code, it takes more than 10 seconds to load 50 empty Editors. I'm suspecting it is due to loading the the font icon of the toolbar of editor.

in Chrome dev tool, loading the embedded 'WebconponentsIcons.ttf' file takes 7 seconds. The font file is used to render the icons in toolbar of Editors as documented in https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

Searching in the forum, there is a similar thread on it for JQuery https://www.telerik.com/forums/editor-is-slow-with-toolbar-enabled. in test code of that thread https://dojo.telerik.com/aMUcArob/7, but the font file is get by separate HTTP request, rather than embedded in other resources.

Editor inline mode has the problem as well.

Any idea on how to resolve it?

Kendo UI version:

"@progress/kendo-editor-react-wrapper": "2018.2.620",
"@progress/kendo-theme-bootstrap": "^2.13.6",
"@progress/kendo-theme-default": "^2.54.0",
"@progress/kendo-ui": "2018.2.620",

RichTextEditor

import * as React from 'react';

import '@progress/kendo-ui';

import { Editor } from '@progress/kendo-editor-react-wrapper';

interface IProps {

onChanged?: Function; // this function will be called when editor losing focus (on blur)

initialValue?: string; // a html string, such as '<strong>Hello World!</strong>'

}

export class RichTextEditor extends React.Component<IProps> {

private initialValue: string;

constructor(props: IProps) {

super(props);

this.initialValue = 'This is a simple sample to show initial value in the rich text editor.'

}

public render() {

return (

<div>

<Editor>

<textarea>

{this.initialValue}

</textarea>

</Editor>

</div >

);

}

App

class App extends React.Component<{}, {}> {

public render() {

return (

<div>

<RichTextEditor />

</div>

);

}

ReactDOM.render(

<App />,

document.getElementById('react-app'));

General Discussions

answered on 17 Oct 2018

3 answers

57 views

Creating a Container GridColumn Component

I've found that it doesn't seem to be possible to create a Container GridColumn component. For example:

https://stackblitz.com/edit/react-5wjdz4?file=app/main.js

Here I want to create a column which has a button that pops up an alert when clicked. When I do so with the following code, it works fine:

<Column title="Alert" width="75px" cell={(props) => <td><button onClick={() => alert('This is a message')}>Alert</button></td>} />

However, I don't want to include the cell, etc. props every time I want to include a column like this in a grid. I'd much rather create a container component I can just pass the message to:

<AlertColumn message="This is a message from a container component" />

With the component class code being:

class AlertColumn extends React.Component {

render() {

<Column title="Alert2" width="75px" cell={() => <td><button onClick={() => alert(this.props.message)}>Alert</button></td>} />

}

However, as you can see from my posted StackBlitz, the column returned by the container component does not render. I've also tried inheriting from the GridColumn component. Is there any way around this?

General Discussions

answered on 17 Oct 2018

3 answers

125 views

Kendo React Bootstrap Datepicker year not clickable

I am using Kendo DatePicker control in React Bootstrap. It seems to be working fine, but when I try to change the year it is not working. I am using React 16+ and Bootstrap 3.3.
below is the scrrenshot for same

General Discussions