Conditionally Show or Hide Items in a Kendo Form

[Bob]

Is it possible to conditionally show and hide items in a Kendo form based upon the data?

For example, if I have a form to enter a Person or a Company, I want to hide the Address field if it is a Company, or hide the Contact field if it is a Person.

Also please note that if attributes are used to try to set the field to display:none as in the example here., it only hides the editor, not the label or hint.

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        formData: {
            Name: "John Doe",
            Address: "123 Main St.",
            Contact: "",
            Type: 1 // 1 = Person, 2 = Company
        },
        items: [{
            field: "Name",
            hint: "Enter Full Name",
        }, {
            field: "Address",
            hint: "Enter Address with ZIP Code",
            attributes:{
                // need to hide this field if the Type = 2
                class: "person"
            }
        }, {
          field: "Contact",
          hint: "Enter the Company Contact",
            attributes:{
              	// need to hide this field if the Type = 1
                class: "company"
            }
        }]
    });
</script>

<style>
  .person {
    display: block;
  }
  .company{
    display: none;
  }
</style>

Thanks, Bob

[Martin]

Hello, Bob,

There are various ways to hide a field. As I am unsure how/when would you like to hide/unhide a field, I am sharing a basic approach to initially hide a field based on the Type field. Here you will find a small example for reference.

Let me know if that would be helpful.

Regards,
Martin
Progress Telerik