web-dev-qa-db-ja.com

剣道テンプレートの条件付き書式

免責事項：これは元々はKendoUIフォーラムに 投稿 でしたが、回答はありません。

リストビューのテンプレートで要素の条件付き書式を使用しようとしています。この部分的なビューは、共有DataSourceを使用して、ページャー、2カードのListView、および前述のテンプレートを介したナビゲーションを可能にします。関連するテンプレートコードは次のとおりです。

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

私はこのコードを生成するいくつかの異なる方法を試しましたが、if (Salutation != null && Salutation != '')のような単純なifを逆にしたチェックを使用しましたが、役に立ちませんでした。 #ifセクション内からDataSourceのデータを参照する方法について何か不足していると思いますか？私はif (#=Salutation# != null && #=Salutation# != '')のようなものを試しましたが、それは悪いテンプレートエラーを投げました。

出力は次のとおりです。

output

注：恐ろしいフォーマットは無視してください。これはプレスタイルです。

参考のためにファイル全体を示します。

_@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：データソースメンバーの値に基づいてコンテンツを構築するためのKendoテンプレートを取得するにはどうすればよいですか？

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

Nullを一重引用符で囲みます。

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

タグは残されていますが、この表記は代替として使用できます。達成しようとしている形式の種類に応じて機能します。

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

私はこれが古いことを知っていますが、私が使用した別の解決策は次のとおりです：

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

次に、JavaScript関数を追加して、プロパティを確認できます。

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

それはかなりイライラさせられたので、他の誰かを助けるかもしれません。もちろん、関数を変更して、好きなものをチェックすることができます。

4
christiandev

これは古いスレッドですが、私の答えは誰かに役立つかもしれません。

次のようにして、条件文をインラインでチェーンできます。

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

ショートカットとして使用できるのは次のとおりです。

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

値に応じて表示/非表示にする場合（空の文字列やnullではない）

1
gmakrygiannis