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: 
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
Post a Comment