Шаблон данных кендо добавить строку, шаблон имеет несколько строк ввода

Question

Привет, я должен разработать ASP.NET MVC страницу, чтобы позволить пользователю добавлять информацию о компании и ее адреса. Это отношения один ко многим. Я использую Kendo UI data-template option.

У меня есть HTML, содержащий материал. На переплете показан первый ряд. Теперь моя проблема заключается в том, что мне нужно реализовать функцию добавления кнопки, чтобы пользователи могли добавлять еще одну строку адреса, например, адрес для выставления счета, почтовый адрес и т. Д. Пожалуйста, посмотрите, как должна выглядеть эта строка. После нажатия кнопки "Добавить" мне нужно создать еще одну пустую строку. Я не смог найти ни одного примера на Кендо или других форумах, чтобы показать это.

Шаблон HTML следующим образом ---

<script id="row-template" type="text/x-kendo-template">
        <tr>
            <td class="col-md-2">Address Type</td>
            <td><input id="addressType" class="col-md-4 k-textbox" required="required" data-bind="value: AddressTypeId" data-required-msg="Please select a value for address type." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Block/House Number</td>
            <td><input id="blockNo" class="col-md-2 k-textbox" required="required" data-bind="value: BlockHouseNumber" data-required-msg="Please enter a value block/house number." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Street Name</td>
            <td><input id="street" class="col-md-4 k-textbox" required="required" data-bind="value: StreetName" data-required-msg="Please enter a value for street name." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Floor</td>
            <td><input id="floorNum" class="col-md-2 k-textbox" required="required" data-bind="value: FloorNumber" data-required-msg="Please enter a value for floor number." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Unit</td>
            <td><input id="unitNum" class="col-md-2 k-textbox" required="required" data-bind="value: UnitNumber" data-required-msg="Please enter a value for unit number." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Building Name</td>
            <td><input id="blockNo" class="col-md-4 k-textbox" required="required" data-bind="value: BuildingName" data-required-msg="Please enter a value for building name." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Postal Code</td>
            <td><input id="postalCode" class="col-md-2 k-textbox" required="required" data-bind="value: PostalCode" data-required-msg="Please enter a value for postal code." /></td>
        </tr>
    </script>

---

div для использования этого шаблона следующим образом

Адрес компании

    <div id="addressDiv">
        <fieldset style="border:none">
            @*<legend>Company Address</legend>*@

            <table>

                <thead>
                    <tr>
                            <th colspan="4"><button onclick="add('address')" class="k-button">Add Address</button></th>
                        </tr>
                </thead>
                <tbody data-template="row-template" data-bind="source: addCo.CompanyAddressList"></tbody>
            </table>
        </fieldset>
    </div>

-----JS для привязки модели

var addVModel = kendo.observable({
    addCo:  @Html.Raw(Json.Encode(Model)),
});
kendo.bind($("#addressDiv"), addVModel);

---- и та часть, о которой я понятия не имею

   function add(rowtype){
    var data = @Html.Raw(Json.Encode(Model));
}

---

Я надеюсь, что некоторые из вас могут иметь представление о том, как этого добиться, пожалуйста, направьте меня. Я не хочу использовать Kendo Grid для этого случая, так как есть еще одна похожая функциональность, но со многими полями, которые не помещаются на одной странице, т.е. не без горизонтальной полосы прокрутки, которую мы стараемся избегать.

Заранее спасибо.

Answer 1

Хорошо, после борьбы в течение приблизительно 1-2 дней, я понял это сам. решение поставить и в нужных местах.

мой адрес div теперь такой

<div id="addressDiv">
   <fieldset style="border:none">
     @*<legend>Company Address</legend>*@
<div data-template="row-template" data-bind="source: addCo.CompanyAddressList"></div>
   </fieldset>
</div>

---

И элемент теперь выглядит следующим образом

<script id="row-template" type="text/x-kendo-template">
      <table>
        <tr>
            <td class="col-md-2">Address Type</td>
            <td><input id="addressType" class="col-md-4 k-textbox" required="required" data-bind="value: AddressTypeId" data-required-msg="Please select a value for address type." /></td>
        </tr>
        <tr>
            <td class="col-md-2">Block/House Number</td>
            <td><input id="blockNo" class="col-md-2 k-textbox" required="required" data-bind="value: BlockHouseNumber" data-required-msg="Please enter a value block/house number." /></td>
        </tr> <!-- rest <td></td> as per previous code, just that I moved <table></table> within script element here -->
</table>
</script>

С помощью этой настройки HTML, вы можете добавить строки, поместив кнопку и добавив пустую строку в модель Kendo (в основном шаблон MVVM).