How to display additional Data in Header Template?

[Rodney]

 Here is my html for the my list view:

<ul id="best-in-klas-products-list-view"></ul>

I have the following 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>  


This is my script for 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) {
        ...
    }
});


The Code is simple clean, I Love it. My problem is that I need to display additional in my header template. We have additional award categories I need to display additional information in the header template. What's the best way to accomplish this? Any help would be greatly appreciated. 

[Kiril Nikolov]

Hello Rodney,

I cannot understand what exactly is the issue you are facing. Your code looks valid, and cannot see any issues.

Could you please elaborate a bit more what exactly are you trying to achieve and what have you done so far?

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik

[Rodney]

The issue I was trying to resolve was I needed to show more data in the template header other than just the group value. I found a solution which I'm going to share here, in case it could help others in the future:

I used a Header Template Function in place of a header template:

headerTemplate: headerTemplateFunction,


The function looked something like this:

function headerTemplateFunction (e) {

     var someData = null;
     var someAdditionalData = null;

     var matchedData = $("#best-in-klas-products-list-view").data("kendoMobileListView").dataSource.data().toJSON().filter(function (item) {
          if (item.groupByField === e.value) {
               someData = item.someData ;
               someAdditionalData = item.someAdditionalData;
          }
          return item.groupByField === e.value;
     });

     var template = 
         '<div class="list-view-group-header">' +
             '<div class="group-header-table-container">' +
                  '<div>' + someData + '</div>' +
                  '<div>' +
                 '<div >' + someAdditionalData + '</div>' +
                 '<div class="award-title">' + moreData + '</div>' +
                 '</div>' +
            '</div>' +
      '</div>';

return template;
}

[Kiril Nikolov]

Hi Rodney,

Thank you very much for sharing your solution with us. In case you need any further information, please try to provide more specific information, so it will be easier for us to assist you.

Regards,
Kiril Nikolov
Telerik