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

App

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:

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:

With the component class code being:

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?

Hi,

 i have a button in a main window. Click on a button opening a kendo pop up. In a Pop up i am drawing signature using kendo.drawing.drawDOM.

When i resize the popup window drawn signature is not resizing(not responsive). Is there any solution?

is there any sample how to build responsive menu ? I've added a few menu items but responsive does not work - it is mess

thanks

Two specific questions:

1. Does react kendo grid support a filter button in the same cell as the header cell? As in the jquery demo here: https://demos.telerik.com/kendo-ui/grid/filter-menu-customization. I could not find a filterable.mode property in the kendo components.

2. Does the react kendo grid support multi-column support? As in the jquery demo here: https://demos.telerik.com/kendo-ui/grid/multicolumnheaders

A more general question:

3. Are there other known limitations between the different implementations? I realize that's a complicated question.

Hello,

Straight to the problem:

My parent component prepares the data for the Gantt

First problem: When I click the button, that sets the showPanel variable to true (it does only that), the Gantt loses all its data, then when I click one of the Gantt view buttons, the data shows back.

However, i managed to workaround that with this method (i am not proud of it). I will appreciate it, if you give me better solution.

Ok. Now i want to filter my Gantt data. When i pass different, filtered data source to the "GanttContainer" components (which contains the Gantt), it does not update.

I tried to set it with setDataSource, but i dont know where that must happen and how to do it.

Can you help me with both my problems please.

Best Regards!

Hello,

Is it possible to use functional HOC for CustomGridDetailRow like the one provided in the documentation (below) which is not leading to extra rendering of GridDetailRow?

Or it's a must to use only an instance of React.Component class/GridDetailRow class?

class CustomGridDetailRow extends GridDetailRow {

    render() {

        const detailData = this.props.dataItem.MasterField2;

        return (

            <div> This is detail template with another grid inside it <Grid scrollable="none" data={detailData} /></div>

        );

    }

}

<Grid data={this.state.data} detail={CustomGridDetailRow} >

    <GridColumn field="MasterField1" />

</Grid>

The point is that if I try to use functional HOC inside detail prop (or just a function returning CustomGridComponent) there're some issues with rendering DetailRow (like additional re-rendering during scrolling). It seems that this variable inside detail property should be an instance of React.Component/GridDetailRow class, otherwise Grid component can't perform some internal logic based on lifecycle hooks.

Thanks in advance for any response.

I'm using the Kendo React Grid and Kendo React DateInput in an application and both, upon replacing the wrapped grid/DateInput components began causing my Jest tests to fail, not even rendering the mounted component.

Every test suite that mounts a component with a DateInput or Grid in the component tree fails with this error: