asp.net mvc 4 - mvc - Formato condicional de la plantilla de Kendo.

telerik

Question

Descargo de responsabilidad: se posted originalmente en los foros de KendoUI, pero no ha recibido respuestas.

Estoy tratando de usar el formato condicional de los elementos en la plantilla de mi ListView. Esta vista parcial utiliza un DataSource compartido para permitir la navegación a través de Pager, un ListView de dos tarjetas y la plantilla antes mencionada. Aquí está el código de la plantilla correspondiente:

<script id="contact-template" type="text/x-kendo-template">
<div id="ContactCard" class="IsActive${IsActive}">
    #if (Salutation === null || Salutation === '''') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>
    #if (Title === null || Title === '''') {##}else{#<p>#=Title#</p>#}#
    <br />
    #if (Email == 0 || Email === '''') {##}else{#<p><a href=''mailto:#=LastName#,%20#=FirstName#%20<#=Email#>''>#=Email#</a></p>#}#
    #if (Phone === null  || Phone === '''') {##}else{#<p>#=Phone##if (Extension === null || Extension === '''') {#</p>#}else{# ext. #=Extension#</p>#}##}#
</div>

He intentado varias formas diferentes de generar este código, incluido un simple if con cheques invertidos como if (Salutation != null && Salutation != '''') Pero sin éxito. ¿Creo que me estoy perdiendo algo sobre cómo hacer referencia a los datos de un DataSource desde la sección #if? Intenté algo como if (#=Salutation# != null && #=Salutation# != '''') Pero eso arrojó un error de plantilla incorrecto.

Aquí está la salida:

Nota: ignorar el formato horrible. Esto es pre-estilo.

Aquí está el archivo completo, para referencia:

@model int   @* accountId  *@

<article id="contactArticle">
    <div id="contactList"></div>
    <footer><span id="pagerTotal"></span><a href="#" class="k-link" id="pageLeft" onclick="pageLeftOne()"><</a><div id="pager"></div><a href="#" class="k-link" id="pageRight" onclick="pageRightOne()">></a></footer>
</article>
<script id="contact-template" type="text/x-kendo-template">
    <div id="ContactCard" class="IsActive${IsActive}">
        #if (Salutation === null || Salutation === '''') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>
        #if (Title === null || Title === '''') {##}else{#<p>#=Title#</p>#}#
        <br />
        #if (Email == 0 || Email === '''') {##}else{#<p><a href=''mailto:#=LastName#,%20#=FirstName#%20<#=Email#>''>#=Email#</a></p>#}#
        #if (Phone === null  || Phone === '''') {##}else{#<p>#=Phone##if (Extension === null || Extension === '''') {#</p>#}else{# ext. #=Extension#</p>#}##}#
    </div>
</script>
<script type="text/javascript">
    var currentPage = 1;
    var pages;
    var contactDataSource;

    //SNIP//   

    $(document).ready(function() {
        var init = 1;
        contactDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: ''@Url.Action("ContactPager", "Contact")'',
                    dataType: "json",
                    type: "POST",
                    timeout: 2000,
                    data: {
                        accountId: @Model
                    }
                }
            },
            schema: {
                data: "data",
                total: "total",
                type: "json",
                model: {
                    fields: {
                        Id: { type: "string"},
                        FirstName: { type: "string" },
                        LastName: { type: "string"},
                        Title: { type: "string", defaultValue: ''''},
                        Salutation: { type: "string", defaultValue: ''''},
                        Extension: { type: "string", defaultValue: ''''},
                        Phone: { type: "string", defaultValue: ''''},
                        Email: { type: "string", defaultValue: ''''},
                        IsActive: {type: "boolean"} //,
                        //ReceivesDistributionEmails: {type: "boolean"}
                    }
                }
            },
            pageSize: 2
        });

        contactDataSource.read();

        contactDataSource.bind("change", function(e) {
            if (init) {
                init = 0;
                if (contactDataSource.total() < 1) {
                    //SNIP

                } else {
                    $("#pager").kendoPager({
                        dataSource: contactDataSource,
                        buttonCount: 5
                    });
                    //SNIP//     
                    pages = $("#pager").data("kendoPager").dataSource.totalPages();

                    $("#contactList").kendoListView({
                        dataSource: contactDataSource,
                        pageable: true,
                        template: kendo.template($("#contact-template").html())
                    });
                    kendo.init($("#contactList"));
                }
            }
        });
    });

</script>

TL; DR: ¿Cómo obtengo una plantilla de Kendo para crear su contenido en función del valor de los miembros de la fuente de datos?

Answer 1

Intente envolver el nulo en comillas simples:

...
#if (Title != ''null'' && Title != '''')  { #
     <p>#=Title# </p> 
# } #
...

Esta notación se puede utilizar como alternativa, aunque las etiquetas se quedan atrás. Podría funcionar dependiendo del tipo de formato que esté tratando de lograr.

<p>${ Title != ''null'' && Title != '''' ? Title : ''''} </p>

Answer 2

Me doy cuenta de que este es un tema antiguo, sin embargo mi respuesta puede ser útil para alguien.

Puedes encadenar tus condicionales en línea así:

groupHeaderTemplate: "${ value == ''D'' ? ''Declined'' : value == ''P'' ? ''Pending'' : value == ''A'' ? ''Approved'' : value }"

Answer 3

Para un atajo puedes usar:

# if(property){ #
#: property #
# } #

Si desea mostrar / ocultar según el valor (no una cadena vacía o nula)

Answer 4

Sé que esto es viejo, pero otra solución que he usado es la siguiente:

@(Html.Kendo().Grid<Object>()
    .Name("dataGrid")
    .DataSource(ds =>
        ds.Ajax()
            .Read(r => r.Action("Action", "Controller", new { area = "area" }))
            .ServerOperation(true)
            .PageSize(50)
            )
    .Columns(cols =>
    {
        cols.Bound(t => t.Property);
    })
    .Resizable(resizeable => resizeable.Columns(true))
    .Scrollable(t => t.Virtual(true))
    .Sortable()
    .Filterable()
    .ColumnMenu()
    .HtmlAttributes(new { style = "height:98%;width:100%;", @class="cssClass" })
    .Events(e => e.DataBound("onDataBound"))
    .Deferred()
    .ClientRowTemplate("<tr>" +
            "#=checkNull(Property)#" +
            "</tr>")
 )

Luego, puede agregar una función de JavaScript para verificar la propiedad.

   function checkNull(item) {
        return item === null ? "" : item;
    }

Fue bastante frustrante, por lo que podría ayudar a alguien más. Obviamente, puedes alterar la función para verificar lo que quieras.