Hi I have a problem with custom scss build and "x" clear button in ComboBox. With your css '@progress/kendo-theme-bootstrap/dist/all.css' the 'x' has style:

When I try to build "@progress/kendo-theme-bootstrap/scss/all.scss" the result is:

My problem is that "right: calc( calc( 0.75rem + 16px) + 1px + 6.5px)" is not working in IE11 and the 'x' is on top of an arrow button.

This example:

- was created with "node-sass node_modules/@progress/kendo-theme-bootstrap/scss/all.scss src/common/styles/kendo-theme.css" 

- not using any custom variable

- not using any other css outside of this generated kendo-theme.css

- "@progress/kendo-theme-bootstrap": "4.10.0",

- "node-sass": "4.13.0",

Shouldn't be this two code snippets identical?

I'm developing SharePoint Online web parts using SpFx and KendoReact.  I have a form built from the samples/demos that is used for both new (db insert) and existing (db update) items.  I've got the insert working fine but I'm having trouble loading the form with the existing item when one is selected for edit.  I've tried the following to no avail:

<Field name={"Name"} component={ TextInput } label={ "Name" } style={{ width: "100%" }} required validationMessage="Name is required" value={ this.state.port.Name } />

My TextInput class is as follows:

const TextInput = (fieldRenderProps) => {
  const { validationMessage, visited, value, ...others } = fieldRenderProps;
  return (
    <div>
      <Input {...others} />
      {
        visited && validationMessage && !value &&
        (<div className={"k-required"}>{validationMessage}</div>)
    }
    </div>
  );

What is the proper method for loading the properties of a state object into a KendoReact form?

Thank you

I have an issue in my GridColumn, need to calculate sum of the cell input data and show in another cell.??!!

Please help me to find out the solution.

Hiii,

I'm using kendo react grid and what i need is if i reorder any column it should save somewhere(hopefully database) and persist on page reload.

Is it possible???

Column resize in grid stopped working when package is updated. I can see that working in 

@progress/kendo-react-grid": "^3.4.1" but it is not working in  "@progress/kendo-react-grid": "^3.11.0",

Is there any thing i need to do on that.

Hi,

Kendo React UI components (in my application) and the website (https://www.telerik.com/kendo-react-ui/components/popup/) demonstrating them are not working properly (Only in IE - I am using IE 11). Please see the screenshots attached, it could be observed that nothing is displayed in the example screen and I am not able to navigate to STACKBLITZ when clicking the link.

Regards,

Vinod 

Hi, 

I have a date picker with a format "dd/MM/yy" https://stackblitz.com/edit/react-igyygx . Is there a way how to force the DatePicker to stay in this century? Because now when I replace the year with a 12 the result is 2012 but 44 will jump to 1944.

I have created a form that will allow users to add items to a list on submit. I used an example and have been trying to rework it using the Kendo UI components but have run into an issue with my Input fields.

My code works when I am using a standard <input> but not when I switch to <Input>. I believe this has to do with the KendUI Input not supporting ref. I am importing the Kendo React Input.

The following works

<input
   ref={(a) => this._inputElement = a}
   placeholder="First Input"
/>

This does not

<Input
  name="firstname"
  style={{ width: "25%" }}
  label="First Name"
  pattern={"[A-Za-z]+"}
  minLength={2}
  required={true}
  ref={(a) => this._inputElement = a}
/>

Does the KendoUI Input support ref?

I can supply the full body of the example code if necessary.

Thanks in advance for any assistance.

I am trying to create a module that allows users to pre-fill dummy content in an editor based on a selection made in an external DropDownList. In the code provided you can see I am using two components and I can pass the initial state into the editor however once loaded I am unable to update the content in the editor. Additionally I have the change rendering in the page outside of either component. Hitting a wall here. See code below.

<code>

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

const { Bold, Italic, Underline,
    AlignLeft, AlignRight, AlignCenter,
    Indent, Outdent,
    OrderedList, UnorderedList,
    Undo, Redo, Link, Unlink } = EditorTools;

export class SimpleDropDown extends React.Component {
    static displayName = SimpleDropDown.name;

    componentDidMount() {
        let editor = document.getElementsByClassName('k-editor')[0]
        let iFrame = editor.querySelector('iframe')
        iFrame.contentDocument.querySelector('.k-content').setAttribute("style", "font-family: Arial, Helvetica, sans-serif;")
    }

    sports = [
        { text: 'Basketball', id: 1 },
        { text: 'Football', id: 2 },
        { text: 'Tennis', id: 3 },
        { text: 'Volleyball', id: 4 }
    ];
    state = {
        // Since the reference of the initial value is not from the 'sports' collection,
        // 'dataItemKey' have to be set.
        value: { text: 'Football', id: 2 }
    };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <>
            <div>
                <div className="example-config">
                    Selected Value: {JSON.stringify(this.state.value)}
                </div>
                <DropDownList
                    data={this.sports}
                    textField="text"
                    dataItemKey="id"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <div className="row">
                    <div className="col-12">
                        <Editor
                            tools={[
                                [Bold, Italic, Underline],
                                [Undo, Redo],
                                [Link, Unlink],
                                [AlignLeft, AlignCenter, AlignRight],
                                [OrderedList, UnorderedList, Indent, Outdent]
                            ]}
                            contentStyle={{ height: 320 }}
                            defaultContent={this.state.value.text}
                            />
                    </div>
                </div>
                </div>
                </>
        );
    }
}

</code>

Thank you in advance for any light you can shed on where I am getting hung up.