2017-11-23 7 views
1

DevExtreme autocompleteアイテムテンプレートにヘッダーとフッターを追加する方法はありますか?DevExtremeオートコンプリートカスタムItemTemplate

現在、私のデータソースからリストを取得していますが、テンプレートに値を設定していますが、それはアイテムのみであり、ヘッダーとフッターを追加する方法が見つからないようです。

これは私の現在の設定DevExtremeの自動補完が直接ヘッダーとフッターをサポートしていません

@(Html.DevExtreme().Autocomplete() 
           .DataSource(ds => ds.WebApi().Controller("Search").LoadAction("SearchEmployees")) 
           .Placeholder("Search for employees") 
           .MinSearchLength(3) 
           .Height(66) 
           .OnItemClick("onItemClick") 
           .DisplayExpr("source.fullName") 
           .ItemTemplate(@<text> 
               <div class="media"> 
                <div class="pr-20"> 
                 <a class="avatar avatar-online"> 
                  <img class="img-circle img-sm" src="#someimage">" title="title"/> 
                 </a> 
                </div> 
                <div class="media-body"> 
                 <h5 class="mt-0 mb-5"> 
                  <%= source.fullName %> <small>(<%= source.employeeId %>)</small> 
                 </h5> 
                 <p> 
                  <small> Comapny : <%= source.companyName %></small><br/> 
                  <%for (i = 0; i < hightlights.length; i++) { %> 
                  <small> <%= hightlights[i].key %> : <%= hightlights[i].value %></small><br/> 
                  <%}%> 
                 </p> 
                </div> 
               </div> 
              </text>)) 

https://js.devexpress.com/Demos/WidgetsGallery/#demo/editorsautocompleteautocompleteautocomplete/

+0

「ヘッダーとフッター」が何を意味するのかは不明です。 'ItemTemplate'オプションがあなたに役立つはずです。 – Sergey

答えて

1

です。最善の策は、データソースに開始項目と終了項目を追加することです。 typeプロパティをアイテムに追加する:

[ { "タイプ": "ヘッダ"、 ... }、{ "タイプ": "データ" ... }、{ "タイプ": "データ" }、{ "タイプ": "フッター" }に応じて項目のスタイルをtypeプロパティのためのあなたの項目テンプレートのチェックで ]