This is a migrated thread and some comments may be shown as answers.

Layouts in templates

5 Answers 518 Views

ListView

This is a migrated thread and some comments may be shown as answers.

Shafi asked on 19 Jun 2016, 10:42 AM

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>

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

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

5 Answers, 1 is accepted

answered on 21 Jun 2016, 01:58 PM

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

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.

answered on 29 Jun 2016, 08:18 AM

untitled-picture.png

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

</script>

It renders like the attached image.

My issues:

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

Thanks.

answered on 30 Jun 2016, 01:57 PM

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

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.