How can we add field controls dynamically?

Posted by Community Admin on 04-Aug-2018 10:20

How can we add field controls dynamically?

All Replies

Posted by Community Admin on 18-Jul-2016 00:00

Hi everyone,

I was working on creating a custom widget and this widget in turn have multiple controls. I was displaying all controls inside a field as below.

Key                        Value
--------------------------------------------------------------
Age                       checkbox
Name                   text
Company            text                      

In my view file I was creating controls based on key, value pair which are available in the dictionary.

<div class="@Model.CssClass sf-fieldWrp">

    <table>
        <tr>
            <td>
                <table>
                    @foreach (var item in Model.FieldItems)
                   
                        <tr>
                            @if (item.Value == "checkbox")
                           
                            <td>@item.Key</td>
                            <td> <input id="associationCheckbox" type="@item.Value" name="@item.Key" placeholder="@item.Key" value="false"/></td>
                           
                            else
                           
                            <td>@item.Key</td>
                            <td> <input type="@item.Value" name="@item.Key" value="@Model.Value" placeholder="@item.Key" /> </td>
                           
                        </tr>
                   
                </table>
            </td>

            <td>
                <span>
                    <button type="button" class="btn btn-success" style='float:none;cursor:pointer' ng-click='RemoveWidget()'>AddPerson</button>
                </span>
            </td>
        </tr>

    </table>
    <span>
        <button type="button" class="btn btn-danger" style='float:none;cursor:pointer' ng-click='AddWidget()'>Remove</button>
    </span>

</div>

Now my requirement for me is to include/remove the chosen fields based on button click. Rough design looks as below. Could you please provide few suggestions for this implementation?


Please check images in this order. 1. Initial 2. AfterAdd 3. AfterRemove

Thanks,
Balu

Posted by Community Admin on 21-Jul-2016 00:00

Hi Balu,

You can add the input elements programmatically using JavaScript. You need to add an unique id and name to the inputs to differentiate them. Then those values should be picked up and send to the Controller Action. This is standard ASP.NET MVC functionality you need to implement.
You can also check:
http://forums.asp.net/t/1779884.aspx?Add+Input+Fields+dynamically+in+client+side+
http://stackoverflow.com/questions/6869661/client-side-validating-dynamically-generated-form-elements-in-mvc-3-0

Regards,
Nikola Zagorchev
Telerik by Progress

 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

Posted by Community Admin on 21-Jul-2016 00:00

Hi Nikola,

Thank your information. Already this issue got fixed.

Thanks,
Balu

This thread is closed