Grouping and Key Controls

[Greg]

Hello!

We need a ListView that has both the grouping (type = group) functionality of the MobileListView, and the ability to use key controls to navigate and select through the list like the normal ListView. Is there any way to accomplish this with either MobileListView or ListView?

Thanks!

[Boyan Dimitrov]

Hello Greg,

Indeed the Kendo UI ListView does not have the ability to show grouped data. Could you please elaborate on the missing feature in the mobile ListView (use key controls to navigate and select)?  

Regards,
Boyan Dimitrov
Telerik by Progress

[Pankaj]

Do we have grouping in kendo listview MVC 2020 version.

[Alex Hajigeorgieva]

Hello, Pankaj,

The Kendo UI ListView does not support a group template out of the box. We do have an open item for it in the Feedback portal and you can vote for it here:

https://feedback.telerik.com/kendo-jquery-ui/1359300-add-grouping-to-web-listview

Meanwhile, you can accomplish the same functionality with the UI for ASP.NET MVC ListView, however you should be aware that the grouped data has a different structure while building the template:

To add a group, use the data source and loop the items in the template:

.DataSource(dataSource => dataSource          
          .Read(read => read.Action("Products_Read", "Grid"))
          .Group(g=>g.Add(f=>f.Category.Name))
          .PageSize(21)
)

<script type="text/x-kendo-template" id="template">
         <div class="k-card-header">
             <h5 class="k-card-title">#=value#</h5>
         </div>
           # for(var i=0; i< data.items.length; i++){#
                <img src="../content/web/foods/#= data.items[i].ProductID #.jpg" alt="#: data.items[i].ProductName # image" alt="undefined" style="width:110px">
                <span>
                    <span >#:data.items[i].ProductName#</span>
                    <span>#:kendo.toString(data.items[i].UnitPrice, "c")#</span>
                </span>
           #}#
    </script>

Here is a runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/eZuKOYif/3

Let me know what you think.

 

 

Regards,
Alex Hajigeorgieva
Progress Telerik

[Timothy Garton]

Will this work with a remote datasource?  I've seen your example, and it works fine, but when I change the datasource to bind with a controller, it's not working.  The data items in the template loop are undefined.

[Alex Hajigeorgieva]

Hi, Timothy,

The suggestion appears to work when I test with one of our services which provide server grouping:

https://dojo.telerik.com/@bubblemaster/IWudaFIy

If items is undefined, I would suggest you place a #console.log(data)# in the template and check what comes through as an argument in your application.

Let me know in case I may assist you further getting this to work in your scenario.

Regards,
Alex Hajigeorgieva
Progress Telerik