Kendo data template add row, template have multi row input fields

Question

Hi, I've to develop ASP.NET MVC page to let user add information about a company and its addresses. It's one to many relationship. I'm using Kendo UI data-template option.

I've HTML containing stuff. On binding first row is shown. Now my problem is that I've to implement Add button functionality to let users add another row of Address e.g. Billing Address, Mailing address etc. Please refer how the row is supposed to look like. On clicking add, I need to create another empty row. I've not been able to find any example on Kendo or other forums to show that.

template html as following---

<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>

the div for using this template as following

Company Address

    <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 for model binding

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

----and the part that I've no clue about

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

I hope some of you might have an idea on how to achieve this, kindly guide me. I don't want to use Kendo Grid for this case as there's one more similar functionality but with many fields, which won't fit in single page i.e. not without horizontal scroll bar, which we try to avoid.

Thank you in advance.

I figured it out myself. the solution is to put <div> and <table> in proper places. — S N

S N S N · Accepted Answer · 2015-09-23T17:00:26

Ok, after struggling for about 1-2 days in total, I figured it out myself. the solution is to put and in proper places.

my address div is now as following

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

And the element is now as following

<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>

With this html setup, you can add rows by placing a button and adding blank row to Kendo Model (MVVM pattern basically).

Kendo data template add row, template have multi row input fields

the div for using this template as following

1 Answers