Search code examples
javascripthtmlkendo-uitelerikkendo-mobile

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

I'm using the Kendo Mobile List List View. I'm using the DataSource with Grouping. I've created a Group Header Template. I need to show additional data in the Group Header. What is the best way to add this data?

Here is an image of my list view as it currently is: enter image description here

This is my script to draw the 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 is my 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 a good way to show additional data in the Group Header? Any Help would be greatly appreciated.

Solution

  • Instead of defining a template for the groupHeader, you can define a function to call. Inside that function you can whatever you need and return whatever you want for the header to say.

    headerTemplate: headerTemplateFunction,

    with the 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 a total of : " + matchedData.length;
}

    See sample on jsBin http://jsbin.com/EdiPEVo/2/edit