Layouts in templates

[Shafi]

After looking at numerous examples of templates, I have noticed a common thing: they are declared as a <dl></dl>. Is there a particular reason for this? Here are my templates:

<script type="text/x-kendo-tmpl" id="template">
    <div class="product-view k-widget">
        <dl>
            <dt>Terminal</dt>
            <dd>#= getTerminalTitleActual(TerminalId) #</dd>
            <dt>Service</dt>
            <dd>#= ServiceId #</dd>
            <dt>Fee</dt>
            <dd>#= ServiceFee#</dd>
            <dt>Card</dt>
            <dd>#= ParkingCardNumber #</dd>
            <dt>Issued On</dt>
            <dd>#= ParkingCardIssueDate #</dd>
            <dt>Expiry Date</dt>
            <dd>#= ParkingCardExpiryDate #</dd>
        </dl>

        <div class="edit-buttons">
            <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
    </div>
</script>

<script type="text/x-kendo-tmpl" id="editTemplate">
    <div class="product-view k-widget">
        <dl>
            <dt>Terminal</dt>
            <dd><input name="TerminalId" data-source=terminals data-role="dropdownlist" data-text-field="TerminalName" data-value-field="TerminalId" /></dd>
            <dt>Service</dt>
            <dd><input name="ServiceId" data-source=services data-role="dropdownlist" data-text-field="NameEnglish" data-value-field="Code" /></dd>
            <dt>Fee</dt>
            <dd><input type="text" data-bind="value:Fee" data-role="numerictextbox" data-type="currency" name="Fee" required="required" /></dd>

            <dt>Card</dt>
            <dd><input type="text" data-bind="value:ParkingCardNumber" class="k-input k-textbox" name="ParkingCardNumber" required="required" /></dd>
            <dt>Issued On</dt>
            <dd><input type="text" data-bind="value:ParkingCardIssueDate" data-role="datepicker" data-format="dd-MMM-yyyy" name="ParkingCardIssueDate" required="required" /></dd>
            <dt>Expiry Date</dt>
            <dd><input type="text" data-bind="value:ParkingCardExpiryDate" data-role="datepicker" data-format="dd-MMM-yyyy" name="ParkingCardExpiryDate" required="required" /></dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
            <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
        </div>
    </div>
</script>

Now this renders a card but I'd like to go for a landscape view with 3 rows and three columns. Can we have customized layouts using bootstrap or tables for templates?

[Dimiter Topalov]

Hi Shafi,

You can use any valid HTML markup in the Kendo UI Templates. I have prepared a simple example of a table in a Kendo UI ListView template:

http://dojo.telerik.com/OpEgU

You can find detailed information about the Kendo UI Templates, and usage examples below:

http://docs.telerik.com/kendo-ui/framework/templates/overview

http://demos.telerik.com/kendo-ui/templates/index

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Shafi]

Ok. I have this template that I plan to use for Display and Edit at the same time:

<script type="text/x-kendo-tmpl" id="editTemplate">
        <div class="product-view k-widget">
                <div class="container-fluid">
                        <div class="row">
                                <div class="col-sm-1">
                                        @Html.Label("TerminalId", "Terminal: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input name="TerminalId" data-source=terminals data-role="dropdownlist" data-text-field="TerminalName" data-value-field="TerminalId" />
                                </div>
                                <div class="col-sm-1">
                                     @Html.Label("ParkingCardNumber", "Card No: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input name="ParkingCardNumber" type="text" data-bind="value:ParkingCardNumber" class="k-input k-textbox" required="required" />
                                </div>
                                <div class="col-sm-3">
                                        <a class="k-button" href="\\#" style="width: 100%"><span class="k-icon k-i-sum">Calculate Payment</span></a>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-sm-1">
                                        @Html.Label("ServiceId", "Service: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input name="ServiceId" data-source=services data-role="dropdownlist" data-text-field="NameEnglish" data-value-field="Code" />
                                </div>
                                <div class="col-sm-1">
                                        @Html.Label("ParkingCardIssueDate", "Card Issue: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input name="ParkingCardIssueDate" type="text" data-bind="value:ParkingCardIssueDate" data-role="datepicker" data-format="dd-MMM-yyyy" required="required" />
                                </div>
                                <div class="col-sm-1">
                                        @Html.Label("PaymentModeId", "Payment Mode: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input name="PaymentModeId" data-source=paymentModes data-role="dropdownlist" data-text-field="NameE" data-value-field="ID" />
                                </div>
                        </div>
                        <div class="row ">
                                <div class="col-sm-1">
                                        @Html.Label("ServiceFee", "Service Fee: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        #=kendo.toString(ServiceFee, "c2")#
                                </div>
                                <div class="col-sm-1">
                                        @Html.Label("ParkingCardExpiryDate", "Card Expiry: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        <input type="text" data-bind="value:ParkingCardExpiryDate" data-role="datepicker" data-format="dd-MMM-yyyy" name="ParkingCardExpiryDate" required="required" />
                                </div>
                                <div class="col-sm-1">
                                        @Html.Label("ServiceFee", "Final Fee: ", new { @class = "k-label" })
                                </div>
                                <div class="col-sm-2">
                                        #=kendo.toString(ServiceFee, "c2")#
                                </div>
                        </div>
                </div>
                <div class="edit-buttons">
                        <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                        <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
                        <a class="k-button k-edit-button"   href="\\#"><span class="k-icon k-edit"></span></a>
                        <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
                </div>
        </div>
</script>

It renders like the attached image.

My issues:

1. Once I press update, the UI for the particular card changes and loses the Kendo Look and Feel.
2. The horizontal alignment is all messed up. It should be middle-aligned horizontally.

Thanks.

[Shafi]

Also, I have the ListView bound to local data (simple object array). Upon adding, not only the view breaks by going non-kendo, it also loses all values. and re-entering edit mode on any row, I see all empty cells but the UI is pleasant again.

[Shafi]

And lastly, can the same layout be achieved in a Grid Template? I think I'll end up with more complexity if i go for a ListView

[Dimiter Topalov]

Hello Shafi,

It seems that some JavaScript mistake is causing the described problems, and prevents the Kendo UI widgets from initializing. You can check the developer tools (F12) console to find out what the error is and fix it.

If this does not help, we will need an isolated runnable example, similar to the ones, provided in my previous post, demonstrating the issue, so we can investigate what might be causing it.

As for the Grid question - you can use the editable.template option to configure the template that will be used in the popup editor:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template

Regards,
Dimiter Topalov
Telerik