This is a migrated thread and some comments may be shown as answers.

How to display additional Data in Header Template?

3 Answers 192 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Rodney
Top achievements
Rank 2
Rodney asked on 04 Feb 2014, 06:58 PM


 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. 









3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 06 Feb 2014, 08:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rodney
Top achievements
Rank 2
answered on 06 Feb 2014, 03:25 PM
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;
}








0
Kiril Nikolov
Telerik team
answered on 10 Feb 2014, 08:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Rodney
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Rodney
Top achievements
Rank 2
Share this question
or