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

Grouping and Key Controls

5 Answers 239 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 29 Mar 2017, 06:34 PM

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!

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 31 Mar 2017, 03:10 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Pankaj
Top achievements
Rank 1
Veteran
answered on 30 Jul 2020, 10:08 PM
Do we have grouping in kendo listview MVC 2020 version.
0
Alex Hajigeorgieva
Telerik team
answered on 03 Aug 2020, 06:35 PM

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

0
Timothy Garton
Top achievements
Rank 1
answered on 02 Oct 2020, 11:04 AM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 05 Oct 2020, 03:33 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListView
Asked by
Greg
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Pankaj
Top achievements
Rank 1
Veteran
Alex Hajigeorgieva
Telerik team
Timothy Garton
Top achievements
Rank 1
Share this question
or