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

2 Way Data Binding for KendoReactForm Fields

2 Answers 321 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Aydın
Top achievements
Rank 1
Aydın asked on 12 Oct 2020, 04:17 PM
I have a functional component which includes a FirmaListesi component to set seciliFirma state and a Form component which edits the selected seciliFirma object. FirmaListesi component includes only a KendoReact Combobox. When I select a Firma object from that component, I want Form component's Field to update its value. However it doesn't happen which occurs with an ordinary Input component.

 

Am I doing something wrong?

 

Kind regards.

 

const FirmaEkle = () => {
  const [firma, setFirma] = useState({ adi: "dswsd" } as Firma);
 
  const firmalar = useTypedSelector((state) => state.firma.firmalar);
  const seciliFirma = useTypedSelector((state) => state.firma.seciliFirma);
 
  const dispatch = useDispatch();
 
  const firmaEkle = () => {
    dispatch(updateFirma([...firmalar, { adi: "ewrer", id: 2 }]));
  };
 
  const handleSubmit = async () => {
    await FirmaKaydet(firma);
  };
 
  return (
    <>
      <FirmaListesi></FirmaListesi>
      <Form
        onSubmit={handleSubmit}
        initialValues={seciliFirma}
        render={(formRenderProps) => (
          <FormElement style={{ width: 400 }}>
            <fieldset className="k-form-fieldset">
              <legend className={"k-form-legend"}>Firma Bilgileri</legend>
              <Field id={"adi"} name={"adi"} label="Firma Adı" component={FormInput}></Field>
              <Button type="submit" disabled={!formRenderProps.allowSubmit}>
                {seciliFirma ? "Güncelle" : "Kaydet"}
              </Button>
            </fieldset>
          </FormElement>
        )}
      />
 
      <Button onClick={() => alert(seciliFirma.adi)}>Deneme1</Button>
    </>
  );
};

2 Answers, 1 is accepted

Sort by
0
Aydın
Top achievements
Rank 1
answered on 12 Oct 2020, 04:43 PM

By setting key prop of Form component, it works as expected. 

Thanks

0
Stefan
Telerik team
answered on 13 Oct 2020, 05:40 AM

Hello, Aydın,

Yes, this is the recommended way to achieve this.

We even have a demo for this exact use case on a pull request.

This is how it looks:

https://stackblitz.com/edit/react-hzn2d9?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Aydın
Top achievements
Rank 1
Answers by
Aydın
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or