web-dev-qa-db-fra.com

Modèle de Kendo avec mise en forme conditionnelle

Déni de responsabilité: Ceci était à l'origine posté sur les forums de KendoUI, mais n'a reçu aucune réponse.

J'essaie d'utiliser la mise en forme conditionnelle des éléments dans le modèle de mon ListView. Cette vue partielle utilise une source de données partagée pour permettre la navigation via Pager, une liste à deux cartes et le modèle susmentionné. Voici le code de modèle pertinent:

<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>

J'ai essayé plusieurs manières différentes de générer ce code, y compris un simple si avec des contrôles inversés comme if (Salutation != null && Salutation != '') mais en vain. Je pense qu'il me manque quelque chose sur la façon de référencer les données d'un DataSource à partir de la section #if? J'ai essayé quelque chose comme if (#=Salutation# != null && #=Salutation# != '') mais cela a jeté une mauvaise erreur de template.

Voici le résultat:

output

Remarque: ne tenez pas compte de la mise en forme horrible. Ceci est pré-style.

Voici le fichier entier, pour référence:

@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: Comment obtenir un modèle de Kendo pour construire son contenu en fonction de la valeur des membres de la source de données? 

asp.net-mvc-4kendo-ui
20
Jesse Smith

Essayez d’emballer la valeur null entre guillemets simples:

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

Cette notation peut être utilisée comme alternative bien que les étiquettes soient laissées derrière. Cela pourrait fonctionner en fonction du type de format que vous essayez d’atteindre.

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

Je sais que c'est vieux, mais une autre solution que j'ai utilisée est la suivante:

@(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>")
 )

Ensuite, vous pouvez ajouter une fonction JavaScript pour vérifier la propriété.

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

C'était assez frustrant, alors cela pourrait aider quelqu'un d'autre. Évidemment, vous pouvez modifier la fonction pour vérifier ce que vous voulez.

4
christiandev

Je me rends compte que c'est un vieux fil, mais ma réponse peut être utile à quelqu'un.

Vous pouvez enchaîner vos conditionnels en ligne comme ceci:

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

Pour un raccourci, vous pouvez simplement utiliser:

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

Si vous souhaitez afficher/masquer en fonction de la valeur (pas de chaîne vide ou null)

1
gmakrygiannis