javascript - Using Kendo Mobile List View, How to set multiple values on HeaderTemplate? -


i'm using kendo mobile list list view. i'm using datasource grouping. i've created group header template. need show additional data in group header. best way add data?

here image of list view is: enter image description here

this script draw list view:

     $('#best-in-klas-products-list-view').kendomobilelistview({                 headertemplate: $('#best-in-klas-products-header-template').text(),                 template: $('#best-in-klas-products-template').text(),                 datasource: new kendo.data.datasource({                     type: 'json',                     transport: {                         read: url                     },                     group: {                         field: 'groupbyfield', dir: "desc"                     },                     sort: [                         { field: "ranking", dir: "asc" }                     ]                 }),                 filterable: false,                 click: function (e) {                     klas.evproductid = e.dataitem.evproductid;                     klas.bestinklasproductdetailsviewmodel.getproductdetails(e);                     klas.app.navigate('#best-in-klas-product-details-view');                 }             }); 

this header template:

    <script id="best-in-klas-products-header-template" type="text/x-kendo-template">     # if ( klas.bestinklasproductsviewmodel.checkforbestinklas(value) ) { #     <div class="list-view-group-header">         <div class="group-header-table-container">             <div><img src="images/best-in-klas.svg" class="best-in-class-logo" /></div>             <div>                 <div class="market-segment-title">#: klas.marketsegmentname #</div>                 <div class="award-title">best in klas</div>             </div>         </div>     </div>     # } else { #     <div class="list-view-group-header">         <div class="group-header-table-container">             <div><img src="images/category-leader.svg" class="best-in-class-logo" /></div>             <div>                 <div class="market-segment-title">#: klas.marketsegmentname #</div>                 <div class="award-title">category leaders</div>             </div>         </div>     </div>     # } # </script> 

is there way show additional data in group header? appreciated.

instead of defining template groupheader, can define function call. inside function can whatever need , return whatever want header say.

headertemplate: headertemplatefunction, 

with function like

function headertemplatefunction(e) {   var matcheddata = $("#listview").data("kendomobilelistview").datasource.data().tojson().filter(function(item) {     return item.continent === e.value;   });    return e.value + " has total of : " + matcheddata.length; } 

see sample on jsbin http://jsbin.com/edipevo/2/edit


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -