Preload KendoReact Form

5 posts, 0 answers
  1. Mark
    Mark avatar
    12 posts
    Member since:
    Jan 2016

    Posted 25 Feb 2020 Link to this post

    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

     

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 26 Feb 2020 Link to this post

    Hello, Mark,

    In this case, we can suggest using the `initialValues` prop of the Form component. This will allow setting the values of the already existing object:

    https://www.telerik.com/kendo-react-ui/components/form/api/FormProps/#toc-initialvalues

    The use of the prop can be seen in action in this demo:

    https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios/#toc-reading-the-field-state

    I hope this is helpful.

    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
  3. Mark
    Mark avatar
    12 posts
    Member since:
    Jan 2016

    Posted 26 Feb 2020 in reply to Stefan Link to this post

    Thank you for the reply Stefan.

    I have implemented the initialValues property as you recommended, however, the values are not showing up in the form.  Interestingly enough, when using the formRenderProps.valueGetter("inputName") the value is there.  Also, for the component property, I tried to use the standard KendoReact objects as a value (Input and NumericTextBox) and I receive the following error:

     

    Type 'typeof Input' is not assignable to type 'string | ComponentClass<FieldRenderProps, any> | FunctionComponent<FieldRenderProps>'.
      Type 'typeof Input' is not assignable to type 'ComponentClass<FieldRenderProps, any>'.
        Construct signature return types 'Input' and 'Component<FieldRenderProps, any, any>' are incompatible.
          The types of 'props' are incompatible between these types.
            Type 'Readonly<InputProps> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<FieldRenderProps> & Readonly<{ children?: ReactNode; }>'.
              Type 'Readonly<InputProps> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<FieldRenderProps>': touched, modified, visited

     

    Since the sample you linked in above used NumericTextBox I thought that maybe my custom TextInput component might be the cause of the issue.  I've pasted in my code for the form below.  I'm using 3.11 version of the Input libray.  Thank you

    <Form
      initialValues={{
        Name: "Test name",
        Code: "Code001",
        ProjectCode: "ProjectCode001",
        FieldOffice: "FO_001",
        ContactEmail: "ce@email.com",
        TimeZoneID: 1,
        YearOfPartnership: 2010,
        GroupName: "GN001"
      }}
      onSubmit={ this.submit_port }
      render={ (formRenderProps) => (
        <form onSubmit={ formRenderProps.onSubmit } className={'k-form'}>
          <fieldset>
            <table style={{ width: "100%" }}>
              <tbody style={{ verticalAlign: "top" }}>
                <tr>
                  <td style={{ width: "48%" }}>
                    <div>
                      <Field name={ "Name" } component={ TextInput } label={ "Name" } style={{ width: "100%" }} required type={"text"} validationMessage="Name is required" />
                    </div>
                    <div>
                      <Field name={ "Code" } component={ TextInput } label={ "Code" } style={{ width: "100%" }} required validationMessage="Code is required" />
                    </div>
                    <div>
                      <Field name={ "ProjectCode" } component={ TextInput } label={ "Project Code" } style={{ width: "100%" }} required validationMessage="Project Code is required" />
                    </div>
                    <div>
                      <Field name={ "FieldOffice" } component={ TextInput } label={ "Field Office" } style={{ width: "100%" }} required validationMessage="Field Office is required" />
                    </div>
                  </td>
                  <td style={{ width: "48%" }}>
                    <div>
                      <Field name={ "ContactEmail" } type={ "email" } component={ TextInput } label={ "Port RSP Inbox" } style={{ width: "100%" }}
                        validator={ (value) => { return new RegExp(/\S+@\S+\.\S+/).test(value) ? "" : "Please enter a valid email for Port RSP Inbox."; } }
                      />
                    </div>
                    <div>
                      <Field name={ "TimeZoneID" } component={ DropDownInput } data={ ["EST","CST","MST","PST"] } label={ "Time Zone" } style={{ width: "100%" }} required validationMessage="Time Zone is required" />
                    </div>
                    <div>
                      <Field name={ "YearOfPartnership" } component={ NumericInput } format="" label={ "Year Of Partnership" } style={{ width: "100%" }}
                        validator={ (value) => { return value <= new Date().getFullYear() && value >= 1990 ? "" : "Please enter a valid year between 1990 and the current year."; } }
                      />
                    </div>
                    <div>
                      <Field name={ "GroupName" } component={ TextInput } label={ "Group Name" } style={{ width: "100%" }} />
                    </div>
                    {
                      formRenderProps.valueGetter("Name")
                    }
                  </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
          <button type={'submit'} className="k-button" disabled={ !formRenderProps.allowSubmit }>Submit</button>
          <button className="k-button" onClick={ () => { this.setState({ mode: 1 }); }} style={{ marginLeft: "15px" }}>Cancel</button>
        </form>
      )}
    />
  4. Mark
    Mark avatar
    12 posts
    Member since:
    Jan 2016

    Posted 26 Feb 2020 Link to this post

    Stefan,

    Please ignore my latest post.  I was able to pinpoint the problem to my TextInput class.  I was extracting the "value" property of the input but not setting it in the actual element.  Thank you again for your help,

    Mark

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

     

     

  5. James
    James avatar
    2 posts
    Member since:
    Mar 2020

    Posted 21 Mar 2020 Link to this post

    hello

    i'm new to React 

    i'm trying to learn a lot from forums and videos

    thanks a lot for sharing this preload

    i'll be using it in my school project 

    thanks for Stefan too


Back to Top