Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 16 Mar 2021 15:22 by ADMIN
Eric
Created on: 05 Mar 2021 02:21
Category: Form
Type: Feature Request
7
Add the ability to dynamically insert/delete fields in the KendoForm, via buttons

Hi,

Is there any example for a jquery button changing the component inside the form?

For example

1. press a button > add a new input row in the form

2. press a button > change the component in one row in form

 

Thanks.

 

4 comments
ADMIN
Nencho
Posted on: 16 Mar 2021 15:22

Hello, Eric,

I have converted this thread to a feature request, so we could have in mind the scenario that you've described in further enhancements of the component.

Thank you for your feedback!

Regards,
Nencho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Eric
Posted on: 12 Mar 2021 02:16

Thanks for your help.

Actually I feel that it is troublesome process that changes the whole form (formdata and items part) when you triggered (click) something.  Before the whole form changes (esp. components), you need to reprogram almost the kendoform script dynamically and re-run the script to display the whole form.

It is better if Telerik can make the kendoform to have more ability to be tweaked its components and also its properties and details.  That's could make user less coding work and more flexible to user coding.

Thanks again.

 

 

ADMIN
Nencho
Posted on: 09 Mar 2021 12:42

Hello, Eric,

Currently, there's no inbuilt functionality for such manipulation within the Form component. You can, however, use the setOptions method, in order to reconstruct the content of the Form. Please consider the following example:

 $("#addRow").click(function(z){
  
     form.setOptions({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia",
            Email: "email@asd.asd"
        }
    });
  
  })

Here's a dojo example, demonstrating the above suggestion: https://dojo.telerik.com/@nenchef/avAseyuj/2 

Note that setOption actually reinitializes the components, so you would need to add the needed options if you need to have the initial configuration of the Form component.

Hope this information helps.

Regards,
Nencho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Eric
Posted on: 05 Mar 2021 08:56

Maybe I should tell more in details:

For example "

<form id=dleave></form><button id=addRow />
<script>
$(document).ready(function () {
    var validationSuccess = $('#validation-success');
    $('#dleave').kendoForm({
        orientation: 'vertical',
        layout: 'grid',
        grid: { cols:6, gutter : 10 },
        items: [{
            type: 'group',
            label: 'dailyleave_col_0',
            layout: ...............,
            grid: ............
            items: [{
                field:.......
                                ..............
                },
                attributes: { ........ }
                }]
            },
                {

     

            label: 'dailyleave_col_1',
            layout: ...............,
            grid: ............
            items: [{
                field:.......
                                ..............
                },
                attributes: { ........ }
                }]
            }
                       ]
             });
 
        $("#textButton").kendoButton({
 
             click: onClick
 
         });
 
        function onClick(e) {
 
            // How to change the component of a row in form ?
 
       }
</script>
Create an account Log In
View
Type
Status
Category