+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How can we add field controls dynamically?

How can we add field controls dynamically?

3 posts, 2 answered
  1. Balanjaneyulu
    Balanjaneyulu avatar
    35 posts
    Registered:
    11 Feb 2016
    18 Jul
    Link to this post
    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


    Answered
  2. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    21 Jul
    Link to this post
    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
     
    Answered
  3. Balanjaneyulu
    Balanjaneyulu avatar
    35 posts
    Registered:
    11 Feb 2016
    21 Jul
    Link to this post
    Hi Nikola,

    Thank your information. Already this issue got fixed.

    Thanks,
    Balu
3 posts, 2 answered