This is a migrated thread and some comments may be shown as answers.

Edit textbox in kendo react

3 Answers 675 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Binu
Top achievements
Rank 1
Binu asked on 04 Oct 2019, 05:43 AM

Hi All,

In my Kendo React Application i am trying to do edit one form. 
In Application i am listing data in  kendo grid. when i click edit button in row opening new window with data in form.

But here i am not able to enter values or change values  in text boxes. How can i solve this issue

 

Below i am giving my code

 <Dialog title={"Edit Module"} width={700} onClose={this.Reassign}>
                        <form className="k-form" onSubmit={(e)=> e.preventDefault()}>
                            <div className="row">
                                <div className="col-md-6">
                                    <div className="form-group">
                                    <input type="hidden" id="hdnId" value={this.state.reaAssignData.ID} />
                                        <label className="strong" htmlFor="usr">Code*</label>
                                         <input type="text" placeholder="Code" className="form-new-control" id="txtModuleCode" value={this.state.reaAssignData.code}  /> 

                                    </div>
                                    <div className="form-group">
                                        <label className="strong" htmlFor="usr">Module Name*</label>
                                        <input type="text" placeholder="Name" className="form-new-control" id="txtModuleName" value={this.state.reaAssignData.name} />
                                    </div>
                                </div>
                            </div>
                            <div className="btn-right">
                                <button className="btn btn-success mr-10" onClick={this.Update.bind(this)}>
                                    <span>
                                        <i className="fa fa-dot-circle-o"></i> &nbsp;
                                        Update Module
                                </span>
                                </button>
                                <button className="btn btn-secondary" onClick={this.Reassign}>Cancel</button>
                            </div>
                        </form>
                    </Dialog>

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Oct 2019, 06:53 AM

Hello, Binu,

Thank you for the provided code.

The issue occurs because the input elements have a value set, but no onChange handler which is required when the component is in controlled mode:

https://reactjs.org/docs/forms.html#controlled-components

We have an example with a similar approach, which can be used for reference

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-external-form/

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Binu
Top achievements
Rank 1
answered on 04 Oct 2019, 10:51 AM

Hi Stefan

                   Thanks for your reply. The link which you provided you i am able to retrieve data from one input textbox. But if there multiple textboxes how we retrieve value from. In that case i am not able to understand this from your link.  In my case i had two textboxes with id attribute txtModuleCode and txtModuleName. From these text box how i retrieve value?

0
Stefan
Telerik team
answered on 08 Oct 2019, 06:59 AM

Hello, Binu,

They both have an onChange handle where the new value is received and can be stored.

Also, we have just added a Form component, which can be used in this case to handle the form data easily:

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

The form is currently only in the dev channel, please check how to get the dev versions:

https://www.telerik.com/kendo-react-ui/components/installation/development-builds/

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Binu
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Binu
Top achievements
Rank 1
Share this question
or