How to display additional Data in Header Template?

4 posts, 0 answers
  1. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 04 Feb 2014 Link to this post



     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. 









  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 06 Feb 2014 Link to this post

    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;
    }








  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Feb 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready