Dynamically Adding and Removing Form Items

Environment

Product Version	2022.2.621
Product	Grid for Progress® Telerik® UI for ASP.NET Core

Description

How can I dynamically add and remove items in the Telerik UI for ASP.NET Core Form?

Solution

This example demonstrates how to add/remove fields dynamically in the "Phones" Form group. The implementation relies on the following key steps:

1. Create a 'Add Phone" button and insert it in the Form when the page is loaded (function "insertAddPhoneButton()").
2. Append a button to each "Phone" field to make it removable (function "insertRemovePhoneButton()").
3. Handle the "click" event of the "Add Phone" button to insert a new Form field. Update the Form with the new item and the Form data by using the setOptions() method.
4. Handle the "click" event of the remove button to remove the specified "Phone" input.

Index.cshtml

    @model ProjectName.Models.PersonViewModel

    @(Html.Kendo().Form<PersonViewModel>()
        .Name("exampleForm")
        .HtmlAttributes(new { action = @Url.Action("Submit", "Home"), method = "POST" })
        .Orientation("horizontal")
        .FormData(Model)
        .Layout("grid")
        .Grid(g => g.Cols(2).Gutter(60))
        .Items(items =>
        {
            items.AddGroup()
            .Label("Personal details")
            .Items(i =>
            {
                i.Add()
                    .Field(f => f.FirstName)
                    .Label(l => l.Text("First Name"));
                i.Add()
                    .Field(f => f.LastName)
                    .Label(l => l.Text("Last Name"));
            });

            items.AddGroup()
            .Label("Phones")
            .Items(i =>
            {
                i.Add()
                    .Field(f => f.Phones[0])
                    .Label(l => l.Text("Phone 1"))
                    .Editor(e => e.MaskedTextBox().Mask("[phone]"));
                i.Add()
                    .Field(f => f.Phones[1])
                    .Label(l => l.Text("Phone 2"))
                    .Editor(e => e.MaskedTextBox().Mask("[phone]"));
            });
        })
    )

JavaScript

    <script>
        function insertRemovePhoneButton(phoneFields) {
            $.each($(phoneFields), function(i,v){
                var deletePhoneBtn = `<em id="removePhoneBtn_${i}"></em>`;
                $(deletePhoneBtn).insertAfter($(this));
                $(`#removePhoneBtn_${i}`).kendoButton({
                    icon: "trash",
                    click: onRemoveBtnClick
                });
            });
        }
        function insertAddPhoneButton() {
            var addPhoneBtn = '<button id="addPhoneBtn">Add Phone</button>';
            $(".k-form-fieldset").eq(1).append($(addPhoneBtn));
            $("#addPhoneBtn").kendoButton({
                icon: "plus",
                click: onAddPhone
            });
        }
        function onRemoveBtnClick(e) {
            var phoneId = $(e.sender.element).attr("id").split("_")[1];
            var formComponent = $("#exampleForm").data("kendoForm");
            var formData = formComponent.options.formData;
            var phoneItems = formComponent.options.items[1].items;
            var currnetPhonesData = formComponent._model.Phones;
            formData.Phones.splice(phoneId, 1);
            phoneItems.splice(phoneId, 1);
            currnetPhonesData.splice(phoneId, 1);   

            var newPhoneItems = [];
            for(var i = 0; i < formData.Phones.length; i++) {
                newPhoneItems.push({
                    "field": `Phones[${i}]`,
                    "editor": "MaskedTextBox",
                    "editorOptions": {
                        "mask": "[phone]"
                    },
                    "label": {
                        "text": `Phone ${i + 1}`
                    },
                    "shouldRenderHidden": false
                });
                formData.Phones[i] = currnetPhonesData[i];
            }

            formComponent.options.items[1].items = newPhoneItems;
            formComponent.setOptions({
                formData: formData,
                items: formComponent.options.items
            });

            insertRemovePhoneButton($('[data-role="maskedtextbox"]'));
            insertAddPhoneButton();
        }

        function onAddPhone(e) {
            var formComponent = $("#exampleForm").data("kendoForm");
            var formData = formComponent.options.formData;
            var phoneItems = formComponent.options.items[1].items;
            var currnetPhonesData = formComponent._model.Phones;
            var totalPhones = phoneItems.length;
            formData.Phones.push("");
            phoneItems.push({
                "field": `Phones[${totalPhones}]`,
                "editor": "MaskedTextBox",
                "editorOptions": {
                    "mask": "[phone]"
                },
                "label": {
                    "text": `Phone ${totalPhones + 1}`
                },
                "shouldRenderHidden": false
            });

            for(var i = 0; i < formData.Phones.length; i++) {
                if(currnetPhonesData[i] != formData.Phones[i]) {
                    formData.Phones[i] = currnetPhonesData[i];
                }
            }

            formComponent.setOptions({
                formData: formData,
                items: formComponent.options.items
            });
            insertRemovePhoneButton($('[data-role="maskedtextbox"]'));
            insertAddPhoneButton();
        }

        $(document).ready(function(){
            insertRemovePhoneButton($('[data-role="maskedtextbox"]'));
            insertAddPhoneButton();
        });
    </script>

For a runnable example based on the code above, refer to the REPL example on dynamically adding and removing Form items.

More ASP.NET Core Form Resources

• ASP.NET Core Form Documentation

• ASP.NET Core Form Demos

• ASP.NET Core Form Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Dynamically Adding and Removing Form Items
• Client-Side API Reference of the Form for ASP.NET Core
• Server-Side API Reference of the Form for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base