Question

I am trying to use a template as shown below, the outcome is a view with all elements from the template on one line, even though i am using

to separate the elements. Why does this not display properly? It seems that no matter what styling i do it still ends up a single line view.

UPDATE
The culprit is the kendo style sheet – kendo.mobile.all.min.css –

So the new question for a kendo expert is why does kendo handle input fields differently when they appear in a listview via a template than when they appear outside of a template?

An input field outside of a listview template gets this class

.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea

Which results in no odd styling rules 🙂 Normal text field view

An input field inside of the template gets this class

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea

which results in these rules being applied to it (making the field sit in a wierd spot and loose all normal field stlying ie border background etc.) Im not 100% sure which wrapper is causing this

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background: 
transparent;

My work around is to give any text fields inside listview templates the class=”k-input” which obviously excludes them from the above css –

<script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>



    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />


<!-- eventDetail view -------------------------------------------------------------------------------------------------->
    <div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            </div>
        </header>
        <form id="updateEventForm">
            <div id="updateEvent">
                <div id="eventDetail"></div>
                <p>
                    <input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
                    <input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button"  data-min="true" value="Save" />
                </p>
                <div id="eventResult"></div>
            </div>

        </form>

    </div>

    <script id="eventDetail-template" type="text/x-kendo-template">

        <p>
        <input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
        </p>
        <p>
        Share this
        <input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
        </p>
        <input name="userID" id="userID" type="hidden" value="#= user_id #" />
        <input name="eventID" id="eventID" type="hidden" value="#= event_id #" />

    </script>

    <script>        
        function getEventDetailData(e) {

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost/mpt/website/api/event_details.php",
                        dataType: "jsonp",
                        type: "GET",
                        data: { userID: e.view.params.user_id, eventID: e.view.params.event_id },
                        cache: false
                    },
                    parameterMap: function(options) {
                        return {
                            userID: options.userID,
                            eventID: options.eventID

                        };
                    }
                },
                schema: { // describe the result format
                    data: "results" // the data which the data source will be bound to is in the "results" field
                }
            });           

            console.log(e);

            $("#eventDetail").kendoMobileListView({
                dataSource: dataSource,
                template: kendo.template($("#eventDetail-template").html())

            }).data("kendoMobileListView");

        }           

        //update event          
        function sendUpdateEvent() {

            var siteURI = "http://localhost/mpt/website/api/update_event.php?";

            app.showLoading();

            var user_id = $('#userID').val();
            var event_id = $('#eventID').val();
            var event_type = $('#event_type').val();
            var event_loc = $('#event_loc').val();
            var event_date_time = $('#event_date_time').val();
            var event_share = $('#event_share').val();

            var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
            var fullURI = siteURI + formVals;

            $.ajax({
                url: fullURI, dataType: 'json', success: function (data) {
                    $('#eventResult').html(data.results);
                    app.hideLoading();
                    app.navigate("#view-myEvents");

                }
            });
        }

        $('#eventUpdateCancelButton').click(function () {

            app.navigate("#view-myEvents");
        });

        $('#eventUpdateSaveButton').click(function () {

            sendUpdateEvent();
        });

        $('#updateEventForm').submit(function () {

            sendUpdateEvent();

            return false;
        });


    </script>

Answer 1

ListView widgets are supposed to be applied to <ul> elements.
Try changing:

<div id="eventDetail"></div>

to:

<ul id="eventDetail"></ul>

---

Also with this bit of code:

        $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: kendo.template($("#eventDetail-template").html())
        }).data("kendoMobileListView");

The .data() call on the end isn’t doing anything here and can be removed, and also you can pass just the text string as the template. You don’t need to call kendo.template() yourself. So you can change that to just:

        $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: $("#eventDetail-template").html()
        });