Layouts in templates

6 posts, 0 answers
  1. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 19 Jun Link to this post

    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?

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 21 Jun Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 29 Jun Link to this post

    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.

  5. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 29 Jun in reply to Shafi Link to this post

    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.
  6. Shafi
    Shafi avatar
    42 posts
    Member since:
    Dec 2014

    Posted 29 Jun in reply to Shafi Link to this post

    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
  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 30 Jun Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready