2 Way Data Binding for KendoReactForm Fields

3 posts, 0 answers
  1. Aydın
    Aydın avatar
    5 posts
    Member since:
    Mar 2015

    Posted 12 Oct 2020 Link to this post

    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. Aydın
    Aydın avatar
    5 posts
    Member since:
    Mar 2015

    Posted 12 Oct 2020 in reply to Aydın Link to this post

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

    Thanks

  3. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 13 Oct 2020 Link to this post

    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/.

Back to Top