Kendo listview with collapse and expand function

1 Answer 420 Views
ListView
Enrico
Top achievements
Rank 1
Enrico asked on 24 Jan 2023, 05:34 AM
how can I add a expand and collapse button for every grouping in kendo listview?

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 26 Jan 2023, 12:24 PM

Hi, Enrico,

The ListView doesn't have a built-in functionality for expanding/collapsing, however you could initialize a Kendo PanelBar over its content to achieve the desired effect.

          let ls = $("#listView").kendoListView({
            dataSource: dataSource,
            template: kendo.template($("#template").html())
          }).data("kendoListView");

          ls.content.kendoPanelBar({
            expand: function(e) {
              $(e.item).find(".cards").css("display", "flex");
            },
            collapse: function(e) {
              $(e.item).find(">span").removeClass("k-selected");
            }
          });

Dojo

https://dojo.telerik.com/@gdenchev/UkETAZov 

Best Regards,
Georgi Denchev
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/.

PATRICE
Top achievements
Rank 1
commented on 11 Dec 2024, 05:38 AM

Hi!

Is this possible with the version 2022.2.621? I gave it a shot by copy/pasting the dojo code and I don't get the same results. The "cards" are not hidden, and there is no show/hide effect on the panel.

Thanks for your help!

Martin
Telerik team
commented on 13 Dec 2024, 09:18 AM

Hello, Patrice,

The 2022.2.621 version of the example looks to be working the same as with the 2023 version. Could you please let me know if I am missing something to observe the issues you are experiencing?

Tags
ListView
Asked by
Enrico
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or