kendo-ui - files - kendo upload mvc

El estilo/formato de la plantilla móvil Kendo no funciona

Question

Estoy tratando de usar una plantilla como se muestra a continuación, el resultado es una vista con todos los elementos de la plantilla en una línea, aunque estoy usando

para separar los elementos. ¿Por qué esto no se visualiza correctamente? Parece que no importa qué estilo lo haga, todavía termina una sola vista de línea.

ACTUALIZACIÓN El culpable es la hoja de estilo de kendo - kendo.mobile.all.min.css -

Entonces, la nueva pregunta para un experto en kendo es: ¿por qué Kendo maneja los campos de entrada de manera diferente cuando aparecen en una vista de lista a través de una plantilla que cuando aparecen fuera de una plantilla?

Un campo de entrada fuera de una plantilla de vista de lista obtiene esta clase

.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

Lo que resulta en reglas de estilo no raras :) Vista de campo de texto normal

Un campo de entrada dentro de la plantilla obtiene esta clase

.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

lo que hace que se apliquen estas reglas (haciendo que el campo se siente en un lugar extraño y pierda todo el campo normal, es decir, el fondo del borde, etc.). No estoy 100% seguro de qué envoltorio está causando esto.

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;

Mi trabajo es dar a los campos de texto dentro de las plantillas de vista de lista la clase = "entrada k" que obviamente los excluye del css anterior -

<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

Se supone que los widgets ListView se deben aplicar a elementos <ul> . Intenta cambiar:

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

a:

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

También con este pedacito de código:

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

La llamada .data() al final no está haciendo nada aquí y puede eliminarse, y también puede pasar solo la cadena de texto como la plantilla. No necesita llamar a kendo.template() usted mismo. Entonces puedes cambiar eso a solo:

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