There are many options available that help achieve the desired appearance and functionality. Custom and default editors can be configured along with different orientations and layouts. The Kendo UI Form widget can be used to create and configure forms using various configuration options. 

Recently we came across a requirement to design a survey form. This form needs to be dynamic. During working on this assignment, we faced many challenges, and with the help of this blog, I want to share the same with you. 

There are several properties associated with each item 

FieldField Name from data
LabelLabel which you want to display
ValidationIf we want to apply any validation on the field
EditorType of editor needed for the field this could be RadioGroup or CheckBoxGroup
EditorOptionsEditor properties can be set here

 

With the above properties an array can be created which assign as form item. 

Eg. SurveyItem= [{field: “Field1”, label: “label1”, validation: {required: true}}, 

{field: “Field2”, label: “label2”}, {field: “Field3”, label: “label3”}] 

 

1.   Multiple controls on one form –

By pushing each element in an array and set the array as item property of the form.

2.   Multiple forms on one page-

To accommodate multiple forms on one page the json format of Items should be like below-

3.   Different layouts on different form groups-

There is no out-of-the-box setting available for this, but we can achieve this using CSS

4.   Add a label on the form without control

Sometimes, we only want to show some text on the form without any control. There is not out of box property associated with this. With the help of CSS, we can achieve this.

Kendo UI form is new and robust control of Kendo UI. There is not much out-of-the-box customization available, but creating whole dynamic page forms is quite helpful.


shruti vyas

Shruti Vyas

Shruti is a technical consultant at Advaiya. With over nine years of experience in the IT industry, Shruti has a passion for data and an ability to understand and analyze it effectively. She shares her insight on various topics such as custom application development, project server customization, client-side scripting etc.

Posted by Advaiya

    Let's connect to make technology work for you.





    Please tick the options most relevant to your business challenges
    Decision makingBusiness productivityCustomer experienceTechnology-led innovationDigital transformation


    [By using this form you agree with the storage and handling of your data by this website.]