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.

Hiii,

I have a grid which has a checkbox cell.......the thing is when i check each row i need to push the data of corresponding row into an array. I have only one save button.

Is it possible to check multiple rows and save the corresponding datas into an array and pass it to the server when i click the save button.

I have attached an image for more understandability.

Hi All

         I want to add new row to grid using react. How its possible?

Hello,

I am working with Spreadsheet and I have a question regarding images.

When I have more than one image on a spreadsheet, on click of those images I want to get info about the image more specifically range of the topLeft cell the image is attached to.

If there is just one image on the sheet I can got to the JSON object of the sheet and just get the only image form the object but if there are more images I want to specify which image is attached to which cell, but the only catch is I want the information on click of an image not cell.

Is it possible to get it?

Thank you in advance.

HI,

I am using spreadsheet wrapper and I want to define few of my own custom keyboard shortcuts like 'Shift+c' should do something for spreadsheet component. 

Is there a way that I can do it programmatically or in any other way? 

Thank you.

I'm trying to locking cell in the tree-list , Ii cant lock that think perfectly, some space is still in there between cells.how can I solve that issue.

I am working in SPFx web part so everything is typescript

I have a Grid that uses a child component for detail

So the props on the component is GridDetailRowProps  

I also want to past the context of where the grid is, to the child component. how can I do it?

Is there an option to 2 parameters?

can I overload the GridDetailRowProps type to have context:any ? how would I do it?

Thank you

Back when I used Kendo for jQuery, I was able to add Grid.kendoTooltip({ ... }).data("kendoTooltip");

with:

tipContent = "<div ><object data='" + e.target.context.href + "' type='application/" + tipAppType + "' width='" + tipWidth + "px' height='" + tipHeight + "px'>"
                    "</object></div>"

and it would show the href ed file of the current Grid cell (or row) .

I am tring to do the same with Kendo React (with hooks) 

I now know that the <Grid /> needs to be nested inside the <Tooltip /> and not the <Tooltip /> inside a cell.

Can someone publish an example how to do that? 

Thanks