Hi,

I have a requirement to implement an editable master-detailgrid. 

After updating a child-record, the master needs to be updated. The update is triggered by tabbing out of the current cell. Then the sum is calculated and updated in the master-grid. 

My problem is, that after updating the master-grid , the child looses its focus.

Here is a simplyfied version of my project:

https://stackblitz.com/edit/react-ctg3nj

Any help would be appreciated.

Regards

This is a very straightforward question, and I'm sure the answer is as well, but I can't seem to figure it out. I want to be able to draw a simple shape, in this case, a circle. Here is what I did:

RenderSurface.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import drawCircle from './DrawCircle';

class RenderSurface extends React.Component {
  surface;
  componentDidMount() {
    drawCircle(this.createSurface());
  }
  createSurface = () => {
    const element = ReactDOM.findDOMNode(this);

    this.surface = Surface.create(element);

    return this.surface;
  }
  render() {
    return (<div id="surface" />);
  }
}

export default RenderSurface;

DrawCircle.jsx

import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;


export default function drawCircle(surface) {
  const circle = new Circle([100, 100], 80, {
    stroke: { color: "red", width: 1 },
    color: "rgb(255, 0, 0)",
  });

  surface.draw(circle);
}

App.js

import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';

function App() {
  return (
    <div className="App">
      <RenderSurface/>
    </div>
  );
}

export default App;

When I run this, I get the following error:

TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor

Hi,

i'm using the popup component in Kendoreact and i tried to change the anmiation enter and exit direction from down and up to right and left with no luck any idea?

Thank You

Monther

How can i set the default rendered font in the KendoReact Editor? When the Editor renders, the content is set to the browser default font (times new roman for me). I don't want to enable users to CHANGE the font, I just want to set what the text looks like in the browser to fit the theme of the rest of my form. To further clarify, I don't want to have the editor serialize the font setting when submitting the form, and I don't want to add the font selector in the toolbar.  I just want the appearance of a different font in the editable area than browser default.

I see 2 examples in the Editor documentation.  The overview example appears to use browser default, and the Custom Rendering Example has the font set to a different font, but it is unclear how that is happening.

Overview Example:

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

Custom Rendering Example:

https://www.telerik.com/kendo-react-ui/components/editor/custom-rendering/

Hello all!

So I have created a DropDownButton with four options like this:

handleTitleMenuClick = (e: any): void => {
    switch (e.itemIndex) {
        case0:
            this.openPartTypeModal();
            break;
        case1:
            this.openPartNameModal();
            break;
        case2:
            this.openAddSubPartModal();
            break;
        case3:
            this.deletePart();
            break;
        default:
            return;
    }
}

render =  () => {
    const titleMenuItems = [
        {text: "Change part type"},
        {text: "Rename part"},
        {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts},
        {text: "Delete part", disabled: this.state.subParts.length > 0}
    ];

    return (
        <div className="part-container">
            <div className="part-title">
                <div className="part-title-text">...</div>
                <div className="part-title-menu">
                    <DropDownButton buttonClass="part-title-menu-button"
                                    popupSettings={{popupClass: 'common-step-title-menu-container'}}
                                    icon={'more-vertical'}
                                    items={titleMenuItems}
                                    onItemClick={this.handleTitleMenuClick}
                    />
                </div>
            </div>
            <div className="part-content">...</div>
        </div>
    );
}

This works exactly like I intend it; I have four options in my dropdown and when I click on an option it behaves a expected.

However, this solution feels very clunky and I have been looking for a neater solution. What I would have deemed most intuitive was to have a "onClick" for each item, something like this:

const titleMenuItems = [
    {text: "Change part type", onClick: this.openPartTypeModal()},
    {text: "Rename part", onClick: this.openPartNameModal()},
    {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts, onClick: this.openAddSubPartModal()},
    {text: "Delete part", disabled: this.state.subParts.length > 0, onClick: this.deletePart()}
];

I have tried adding the above but that resulted in some strange rendering error (Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.). I have looked through the documentation but I have not found anything that could help me.

The closest I found was an onClick in https://www.telerik.com/kendo-react-ui/components/buttons/api/ButtonItemProps/ but I don't understand if it's applicable here, and if so, how to implement it.

Maybe there is no alternative?

I have a "list of components", rendered by a map. I have created a StackBlitz here: https://stackblitz.com/edit/react-ts-vieabu?file=index.tsx. Each "box" has a title div and a content div. When clicking on the title, the content should expand or collapse.

As you can see in the title I have a span with an image, which when clicked should display a dropdown menu. This menu has a couple of constraints that needs to be fulfilled:

• It should open/close on clicking the ellipsis.
• It should NOT open/close on hovering the ellipsis.
• It should always close when clicking outside the opened menu.

So it should behave more or less exactly like a regular <select> dropdown, but I also need to be able to have custom elements and styling for each option in the menu. I have tried two approaches:

1. I tried using the Menu component and using "openOnClick". The problem here is that I don't seem to be able to prevent opening on hover after every odd (first, third, fifth etc.) click.
2. I tried using the Popup component and having a <ul> as menu element, but here I cannot do it so it closes when clicking outside the menu. I tried adding a document.addEventListener('click', ...) to the BoxContainer component but that did not help or I did something wrong.

What would you say is the best approach here? Menu, Popup or something else?

Hello, is there support to display inline style in the Editor?

When pasting html data in ViewHtml (popup) tool that has inline styles in the tags it removes the styles and I get just the tags and content :) Is there a way to keep the styles and display them in the editor ?

Hello, is there support to display inline style in the Editor?

When pasting html data in ViewHtml (popup) tool that has inline styles in the tags it removes the styles and I get just the tags and content :) Is there a way to keep the styles and display them in the editor ?

Hello,

I currently am working on a project where we need a dropdownbutton that displays a checklist list where multiple items can be selected/checked before the list closes.

I know that several other Kendo React components have an auto-close flag or similar feature, but so far I have been unable to prevent the DropDownButton component from auto-closing whenever one of the items in the dropdown is selected.

Is there some way (either some existing parameter or known workaround) to prevent the close event from happening "onItemClick" for the DropDownButton as I only want it to happen "onBlur"?

I'm trying to add a local date picker i was successful in localizing
everything in the picker except changing the numbers my code is:

see attached pic for result

know i can't  change the numbers from 0123456789 to ٠١٢٣٤٥٦٧٨٩
any idea how to do that ?

thanks

Monther