How to add grouping to a Listview populated with remote data

[Glenn]

I have a listview populated with remote data through PHP. I want to add grouping but after reading the documentation can't figure out how to do it. This is the template I'm currently using. I want to group by a field called "category_name" and display show that field as the group header. I don't need any footer.

    <script type="text/x-kendo-template" id="template">
      <div class='product'>
        <img src='product_images/#:thumbnail_image#'>
        <div ID=divProductName style='color: rgb(21,159,136); font-size: 17px; font-weight: bold'>#:product_name#</div>
        <div style='font-size: 18px'>#:short_desc#</div>
      </div>
    </script>

This is the code from your grouping sample, which adds various classes such as "k-listview-item", "k-group-title" "k-card" which I am not using. It isn't clear to me if these classes are necessary when using grouping or how to incorporate it into my template. I would appreciate if you could modify my code to include this. Thanks.

<script type="text/x-kendo-template" id="template">
        <div class="k-listview-item k-content">
            <h4 class="k-group-title">#= data.value #</h4>
            <div class="cards">
                # for (var i = 0; i < data.items.length; i++) { #
                <div class="k-card" style="width: 15em; margin:2%">
                    <img class="k-card-image" src="#=destinationURL(data.items[i].ImageUrl)#" />
                    <div class="k-card-body">
                        <h4 class="k-card-title">#= data.items[i].Title #</h4>
                        <h5 class="k-card-subtitle">#= data.items[i].Description #</h5>
                    </div>
                </div>
                # } #
            </div>
            <h5 class="k-group-footer"> #=data.items.length# Destinations in #= data.value #</h5>
        </div>
    </script>

[Patrick | Technical Support Engineer, Senior]

Hello Glenn,

The template can be used per each group within the Kendo UI ListView.  The k-classes are utilized to style the ListView's content.  So in the case of the mentioned ListView Live demo, if removing the k-classes, this is what it would look like(Progress Kendo UI Dojo - Example):

In the case where the k-classes and cards are being utilized, here is the styling(Progress Kendo UI Dojo - example):

Additionally, I noticed the ID being used in the 2nd div in the template. This could cause some issues in regards to a repeating elements with the same ID:

    <script type="text/x-kendo-template" id="template">
      <div class='product'>
        <img src='product_images/#:thumbnail_image#'>
        <div ID=divProductName style='color: rgb(21,159,136); font-size: 17px; font-weight: bold'>#:product_name#</div>
        <div style='font-size: 18px'>#:short_desc#</div>
      </div>
    </script>

Finally, the template is set with the data of the dataSource in the following way:

    <script type="text/x-kendo-template" id="template">
        <div class="k-listview-item k-content">
        
            <!--data.value is the name of the group-->
            <h4 class="k-group-title">#= data.value #</h4>
            
            <div class="cards">
                <!--For each of the data.items which are the items corresponding to the items in the group-->
                # for (var i = 0; i < data.items.length; i++) { #
                
                <!--return the image, title and description--> 
                <div class="k-card" style="width: 15em; margin:2%">
                    <img class="k-card-image" src="#=destinationURL(data.items[i].ImageUrl)#" />
                    <div class="k-card-body">
                        <h4 class="k-card-title">#= data.items[i].Title #</h4>
                        <h5 class="k-card-subtitle">#= data.items[i].Description #</h5>
                    </div>
                </div>
                # } #
            </div>
           <!--Removed footer-->
        </div>
    </script>

The data is being manually included with the data scope in the template.  For more information regarding using data within Kendo UI Templates, please take a look at the following regarding Disabling with Blocking.  

Regards,
Patrick
Progress Telerik