javascript - mvc - Cómo tener detalles modulares: plantilla para la versión anterior de KendoUI Grid

kendo ui

Question

Ok, algunos antecedentes. Estamos en el entorno Angular / Kendo. Sin embargo, estamos usando una versión anterior de KendoUI desde Q2-2014. Qué significa eso?

• Significa que si queremos usar la plantilla de detalles con Kendo-Grid, entonces no podemos usar la nueva Directiva Angular k-detalle-plantilla . Si lo usamos, no se procesa correctamente como una plantilla de Kendo, como se puede ver en este Dojo http://dojo.telerik.com/oMEvI/6 . Como puede ver, si elegimos una biblioteca más nueva, la plantilla de detalles es compatible, pero la anterior no es compatible. Sin embargo, no tenemos el lujo de actualizar nuestra biblioteca de Kendo en este momento, así que tenemos que encontrar una alternativa con la biblioteca de la vieja escuela que tenemos.
• Ahora, nuestro trabajo es usarlo de la manera que se usó en JQuery clásico como se ve en Dojo aquí: http://dojo.telerik.com/otiqU

Funciona y hasta ahora todo bien. Sin embargo, no tiene una naturaleza modular y me obliga a incluir la plantilla HTML dentro del controlador, que no es la forma más elegante de hacerlo (al menos en mi opinión). Mi pregunta es ¿Cómo puedo tener la plantilla a continuación?

 detailTemplate: "<b>This is where all the details go</b>",

En lugar de ser asignado en línea, ¿viene desde una vista HTML separada para que no ensuciar mi controlador con html no deseado?

Answer 1

Dos cosas vienen a la mente.

 detailTemplate: kendo.template($("#myTemplate").html()),

O

clientTemplateID="tmpGridViewItem",


<script type="text/x-kendo-tmpl" id="tmpGridViewItem">
    <div class="gridViewItem">
        <h3>#:ModelFieldValue#</h3>
    </div>
</script>

O

 var templateContent = that._templates.divA;
 var template = kendo.template(templateContent);
 ...

 _templates: {
                divA: "<div style=''position:absolute;''> <img src=''#=data.imageUrl#'' alt=''Help'' ></img></div>",
                divB: "<div style=''position:absolute; ><img class=''k-button'' src=''#=data.imageUrl#'' alt=''Help'' ></img></div>"
            }