Preload KendoReact Form

[Mark]

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

 

[Stefan]

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

[Mark]

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: "[e-mail]",
    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>
  )}
/>

[Mark]

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>
  );
};

 

 

[James]

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