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>

I have a form where I want to use radio buttons to represent the item value, but I want the label of the radio buttons to be something different than the value.  For example, I have a name and I want to distinguish that name between a type of Person or Company, but the data value representing the name type is numeric.

I can setup the form like this:

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

<script>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "John Doe",
            Type: 1  // 1 = Person, 2 = Company
        },
        items: [{
            field: "Name",
            validation: { required: true }
        }, {
            field: "Type",
            editor:"RadioGroup",
        editorOptions: {
          layout: "horizontal",
          items: [1, 2],
          select:function(e){              
            // Do something here?
          } 
        },
        }]
    });
</script>

Using Items: [1, 2] does work, but I don't want to show 1 and 2 on the radio buttons.  I want to show Person and Company.  How do I achieve that?  Can I set Items: ["Person", "Company"] and then do something in the select function?  If so, what needs to be done to set the model data correctly?

Please note that in my actual code, I am using setOptions for the model data, and not formData. 

Thanks, Bob

Hi,

We've using a Form component with an Upload component in it. The validation within the Upload works fine but we'd like to check whether a file has been uploaded and / or selected. The "required" part of the Form validation doesn't seem to trigger when no file is selected. Code provided is an item in the Form.

                    {
                        field: "mailingList",
                        label: "Mailing List",
                        colSpan: 2,
                        editor: function (container, options) {
                            $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                                .kendoUpload({
                                    async: {
                                        saveUrl: "/rates-notices-campaign/save-attach/" + id,
                                        removeUrl: "/rates-notices-campaign/remove-attach/" + id,
                                        autoUpload: true
                                    },
                                    validation: {
                                        allowedExtensions: [".csv", ".xlsx"]
                                    }
                                });
                        },
                        validation: {
                            required: {
                                message: "Mailing List is required"
                            }
                        }
                    }

Thanks

For the KendoForm jQuery control, how do I control the forms method and action attributes.

Does the form default to sending the e.model ?

I don't see any attributes to change the method [get or post,] nor the action url.

Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states  'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave'  etc.  It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.

Any help would be GREATLY appreciated!

If you look at the demo of the Kendo Form the date value works great when you populate the date.  If you have an empty date the calendar icon does not appear and you don't get the datepicker.

https://demos.telerik.com/kendo-ui/form/index

How do I tell the form to present a datepicker field when the date field is empty?

It appears that if the field Label has 'Date' in it it assumes its a date field, but not if its left blank.

I can assign the field to to kendodatepicker but the calendar icon is then in the misplaced.

I modified the demo to show what I am talking about in the attached.

seems just work perfectly if the tag is FORM, if div, submit will not be fired, would be great to have one of two options:

1 - use div tag (all works well except submit)

2 - give the ability to get a model from the form, like when submitting (e.model), form.model or form.model(), now have to form._model & get to string & back to json to be able to post

P.S some time we cant use form tag to do not have it nested

Hello, kendo practitioners! I always get a lot of help.
While creating an input form using KendoForm, I used colSpan to create a 2-space field, but it is displayed out of proportion as shown below.

The field's label area is displayed larger.

The code was written as follows.

$('#grid').kendoForm({
    grid: {
        cols: 4,
        gutter: 20
        },
    items: [{
               field: "field1",
               label: "Field1"
            },{
               field: "field2",
               label: "Field2"
            },{
               field: "field3",
               label: "Field3",
               colSpan: 2
            }]
});